QT QML 练习1 - 技术栈

这个代码是使用 QtQuick 框架编写的一个简单的 GUI 应用程序，创建了一个窗口，其中包含了一个背景图像、一个风车杆（pole），以及一个可以点击旋转的风车（pinwheel）。以下是对实现的详细介绍及其特点：

代码结构及实现细节

导入 QtQuick
qml 复制代码
```
import QtQuick
```
这个导入语句引入了 QtQuick 模块，它是创建现代、动画丰富的用户界面的核心模块。
创建窗口 (Window)
qml 复制代码
```
Window {
    width: 500
    height: 300
    visible: true
    title: qsTr("小风车转转呀转")
```
- 创建了一个宽 500 像素，高 300 像素的窗口。
- 设置 visible: true 使窗口可见。
- 设置 title 为 "小风车转转呀转"，这会在窗口顶部显示。
背景图片 (background)
qml 复制代码
```
Image {
    anchors.fill: parent
    id: background
    source: "./background.png"
```
- 创建一个 Image 元素，用于显示背景图。
- 使用 anchors.fill: parent 使背景图片填充整个窗口。
- 设置 source: "./background.png"，从当前目录加载背景图。
风车杆 (pole)
qml 复制代码
```
Image {
    id: pole
    source: "./pole.png"
    width: background.width * 0.02
    height: background.height * 0.6
    anchors.bottom: parent.bottom
    anchors.horizontalCenter: parent.horizontalCenter
```
- 创建了一个 Image 元素用于表示风车杆。
- 设置了 source 属性从文件加载风车杆的图像。
- width 和 height 使用背景的尺寸进行百分比设置，以适应窗口的变化，保持比例一致。
- 使用 anchors.bottom: parent.bottom 使风车杆底部与背景的底部对齐。
- anchors.horizontalCenter: parent.horizontalCenter 确保风车杆水平居中。
风车 (pinwheel)
qml 复制代码
```
Image {
    id: pinwheel
    source: "./pinwheel.png"
    width: background.width * 0.16
    height: width
    anchors.bottom: pole.top
    anchors.horizontalCenter: pole.horizontalCenter
    rotation: 20

    Behavior on rotation {
        NumberAnimation {
            duration: 500
        }
    }
}
```
- 创建了另一个 Image 元素用于显示风车。
- 设置了 source 为 "./pinwheel.png"，加载风车图片。
- width 设置为 background.width * 0.16，这使风车的宽度随着背景变化保持比例。
- height 设置为和 width 相同，以确保风车为正方形。
- 使用 anchors.bottom: pole.top 使风车的位置位于风车杆的顶部，水平居中对齐风车杆。
- 设置初始旋转角度为 20，通过 rotation: 20。
- 使用 Behavior on rotation，定义了一个 NumberAnimation，动画持续时间为 500 毫秒，保证旋转角度变化时有平滑过渡效果。
点击旋转控制 (MouseArea)
qml 复制代码
```
MouseArea {
    anchors.fill: parent
    onClicked: pinwheel.rotation += 360
}
```
- MouseArea 用于响应鼠标点击事件，anchors.fill: parent 表示 MouseArea 填充整个窗口。
- 当点击窗口时，会执行 onClicked 中的代码，将 pinwheel.rotation 增加 360 度，使风车旋转一圈。
- 每次点击风车都会增加 rotation 值，因此风车看起来会顺时针旋转。

代码的特点

组件结构清晰
- 窗口（Window）中包含背景（background）、风车杆（pole）和风车（pinwheel）等元素，结构清晰，便于理解和维护。
动画效果
- 使用了 NumberAnimation 对风车的旋转进行平滑处理，使得风车旋转起来更加自然，不会突然改变角度。
响应用户交互
- MouseArea 提供了用户交互，点击可以让风车旋转，实现了简单的用户交互功能。
相对布局
- 使用相对布局，风车和风车杆的位置相对于背景进行调整，这样即使改变窗口大小，风车和风车杆的相对位置也能保持一致。
尺寸动态调整
- 使用 background.width 和 background.height 的比例来设置风车杆和风车的尺寸，确保窗口大小变化时整体布局和比例保持不变。

可改进的地方

持续旋转
- 目前点击一次只能让风车旋转一圈，可能需要通过状态控制和无限循环动画来实现持续旋转的效果。
点击控制开始和停止
- 可以改进为点击一次启动旋转，再次点击则停止旋转，实现更灵活的用户交互。
尺寸和布局的改进
- 可以考虑使用更精细的布局方式，进一步确保在不同窗口尺寸下的稳定性和美观性，比如使用 Layout 模块进行更细致的布局控制。

总体来说，这段代码实现了一个基本的可交互的动画界面，具有相对简单的动画和交互功能，是学习 QML 及其动画、布局和用户交互特性的良好起点。

功能：点击鼠标，风车旋转360度

c 复制代码

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.6 // 使用背景的高度的百分比来设置杆子的高度
            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
            rotation: 20

            Behavior on rotation {
                NumberAnimation {
                    duration: 500
                }
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: pinwheel.rotation += 360
        }
    }
}