QT QML 练习2

这段代码使用 QtQuick 实现了一个简单的 GUI 界面，主要功能是展示一个背景图像、一个风车杆和一个可以旋转的风车。点击风车时，风车可以开始或者停止旋转。以下是对代码的详细介绍。

代码结构及实现细节

1. 导入 QtQuick

   import QtQuick
   

   • 该语句引入了 QtQuick 模块，用于创建图形用户界面 (GUI)。

2. 窗口 (Window)

   Window {
       width: 500
       height: 300
       visible: true
       title: qsTr("小风车转转呀转")
   

   • Window 是主窗口组件，设置了宽度为 500 像素，高度为 300 像素。
   • visible: true 表示窗口可见。
   • title 为 "小风车转转呀转"，显示在窗口标题栏中。

3. 背景图片 (background)

   Image {
       anchors.fill: parent
       id: background
       source: "./background.png"
   }
   - 创建一个 `Image` 元素作为背景图。
   - `anchors.fill: parent` 表示背景图片填满窗口。
   - `source` 属性指向图片路径 `"./background.png"`。
   
   

4. 风车杆 (pole)

   Image {
       id: pole
       source: "./pole.png"
       width: background.width * 0.02
       height: background.height * 0.3
       anchors.bottom: parent.bottom
       anchors.horizontalCenter: parent.horizontalCenter
   }
   

   • Image 元素用于表示风车杆。
   • 设置 width 和 height 属性，使用背景图的宽高比例来设置风车杆的尺寸，确保杆子随着窗口变化而保持比例一致。
   • anchors.bottom: parent.bottom 将风车杆的底部对齐到窗口底部。
   • anchors.horizontalCenter: parent.horizontalCenter 使风车杆在水平上与窗口居中对齐。

5. 风车 (pinwheel)

   Image {
       id: pinwheel
       source: "./pinwheel.png"
       width: background.width * 0.16
       height: width
       anchors.bottom: pole.top
       anchors.horizontalCenter: pole.horizontalCenter
   

   • 创建了一个 Image 元素用于表示风车。
   • 使用背景宽度的 16% 设置风车的宽度，同时让 height 等于 width 保证风车为正方形。
   • anchors.bottom: pole.top 使风车的位置位于风车杆的顶部，水平居中对齐风车杆。

6. 状态控制 (states)

   states: [
       State {
           name: "rotating"
           PropertyChanges {
               target: pinwheel
               rotation: 3600
           }
       },
       State {
           name: "stopped"
           PropertyChanges {
               target: pinwheel
               rotation: 0
           }
       }
   ]
   

   • 定义了两个状态：rotating 和 stopped。
   • rotating 状态使风车旋转一定角度 (rotation: 3600)，从视觉效果上看是长时间旋转。
   • stopped 状态将风车的旋转角度设为 0，表示停止旋转。

7. 鼠标交互 (MouseArea)

   MouseArea {
       anchors.fill: parent
       onClicked: {
           if (pinwheel.state === "rotating") {
               pinwheel.state = "stopped";
           } else {
               pinwheel.state = "rotating";
           }
       }
   }
   

   • 使用 MouseArea 监听用户的点击事件。
   • anchors.fill: parent 使鼠标区域覆盖整个风车图片区域。
   • onClicked 事件处理函数，点击时检查风车的状态，如果是 rotating 状态则切换到 stopped，否则切换到 rotating。

8. 状态变化时的动画 (transitions)

   transitions: [
       Transition {
           from: "stopped"
           to: "rotating"
           SequentialAnimation {
               loops: Animation.Infinite
               PropertyAnimation {
                   target: pinwheel
                   property: "rotation"
                   from: 0
                   to: 360
                   duration: 2000
                   easing.type: Easing.Linear
               }
           }
       },
       Transition {
           from: "rotating"
           to: "stopped"
           PropertyAnimation {
               target: pinwheel
               property: "rotation"
               duration: 500
           }
       }
   ]
   

   • 当风车状态从 stopped 切换到 rotating 时，使用 SequentialAnimation 实现无限循环的旋转效果。
   • loops: Animation.Infinite 表示动画无限循环，风车看起来会持续旋转。
   • PropertyAnimation 定义了风车的旋转属性动画，从 0 到 360 度，持续时间为 2000 毫秒。
   • easing.type: Easing.Linear 表示旋转过程为匀速。
   • 从 rotating 到 stopped 切换时，使用一个简单的 PropertyAnimation 逐渐停止旋转。

代码的特点

1. 图形动画及交互：

   • 通过 MouseArea 处理鼠标点击，结合 State 和 Transition 控制风车的旋转和停止。
   • 使用 SequentialAnimation 使风车在旋转状态时无限循环，提供生动的视觉效果。

2. 状态管理：

   • 使用 states 和 transitions 来管理风车的旋转和停止状态，使得动画逻辑清晰且易于控制。

3. 动态调整布局：

   • 使用相对布局的方式，根据背景的尺寸来设置风车和风车杆的大小。
   • 通过这种相对布局，确保窗口调整大小时，界面布局也能相应调整。

4. 平滑动画效果：

   • 使用 PropertyAnimation 和 NumberAnimation 确保旋转角度变化时有平滑的过渡，不会突兀地跳转。

可改进的地方

1. 性能优化：

   • 无限旋转的动画可能对性能有一定影响，如果程序在低性能设备上运行，可以考虑使用更优化的动画方式。

2. 用户体验：

   • 可以增加更多的视觉反馈，比如风车启动和停止时的声音效果或视觉变化，让用户对操作有更明确的反馈。

3. 布局兼容性：

   • 可以使用更多 Layout 模块，例如 ColumnLayout 或 GridLayout，使界面布局更加精细，进一步适配各种屏幕尺寸。

总体来说，这段代码展示了一个具有基础交互和动画效果的小型图形界面应用。通过使用 QtQuick 的状态管理、动画过渡、以及相对布局，使得界面交互流畅且具有一定的美观性，非常适合作为学习 QML 和动画特性的入门示例。
功能：点击一下停止，点击一下一直旋转

import QtQuick

Window {
    width: 500 /* background.width */
    height: 300 /* background.height */
    visible: true
    title: qsTr("小风车转转呀转")

    Image {
        anchors.fill: parent
        id: background
        source: "./background.png" // URL

        Image {
            id: pole
            source: "./pole.png"
            width: background.width * 0.02 // 使用背景的宽度的百分比来设置杆子的宽度
            height: background.height * 0.3 // 使用背景的高度的百分比来设置杆子的高度
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Image {
            id: pinwheel
            source: "./pinwheel.png"
            width: background.width * 0.16 // 使用背景的宽度的百分比来设置风车的宽度
            height: width // 确保风车保持正方形
            anchors.bottom: pole.top
            anchors.horizontalCenter: pole.horizontalCenter

            // 设置风车旋转的状态，"stopped" 和 "rotating"
            states: [
                State {
                    name: "rotating"
                    PropertyChanges {
                        target: pinwheel
                        rotation: 3600 // 大的值使得动画足够长，看起来是无限旋转
                    }
                },
                State {
                    name: "stopped"
                    PropertyChanges {
                        target: pinwheel
                        rotation: 0
                    }
                }
            ]

            // 点击时改变状态
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if (pinwheel.state === "rotating") {
                        pinwheel.state = "stopped";
                    } else {
                        pinwheel.state = "rotating";
                    }
                }
            }

            // 在状态变化时应用动画
            transitions: [
                Transition {
                    from: "stopped"
                    to: "rotating"
                    SequentialAnimation {
                        loops: Animation.Infinite // 无限循环旋转
                        PropertyAnimation {
                            target: pinwheel
                            property: "rotation"
                            from: 0
                            to: 360
                            duration: 2000 // 每次旋转的持续时间（毫秒）
                            easing.type: Easing.Linear // 保持匀速旋转
                        }
                    }
                },
                Transition {
                    from: "rotating"
                    to: "stopped"
                    PropertyAnimation {
                        target: pinwheel
                        property: "rotation"
                        duration: 500
                    }
                }
            ]
        }
    }
}

原文地址：https://blog.csdn.net/a15236617777/article/details/142906928

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！