【Qt】Qt Creater界面开发案例（qml程序）——旋转的风车

电玩女神 2022-10-28 14:20 483阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70]  
点击鼠标，风车可旋转起来。

参考：[https://qmldoc.cn/meet\_qt\_5/qt5\_introduction.html][https_qmldoc.cn_meet_qt_5_qt5_introduction.html]

# 一、创建项目和文件 #

1 新建一个项目  
2 右键选择项目->add new->选择QML File，填写好文件名、路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 1]  
3 可以观察到，项目中新增一个QML文件夹，里面有qmltest.qml文件。QML文件采用.qml作为文件格式后缀。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 2]

# 二、编写程序 #

在项目目录下的images内有三张图片。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 3]

作为一种标记语言（类似HTML）一个QML文档有且只有一个根元素，在这个例子中使用Image元素作为根元素，这个元素的宽度、高度与"images/background.png"图像相同。

import QtQuick 2.5
    
    Image {
        id: root
        source: "images/background.png"
    }

QML中不限制根元素类型，在上面这段代码中我们设置了Image元素的source属性作为我们的背景图像，它也是我们的根元素。  
![background][]

> 每个元素都有属性，比如Image有width和height，也会有其它的属性如source。Image元素的尺寸会自动与source设置的图像匹配。想要自定义Image元素的尺寸必须显式的定义width和height的值。

> 大多数标准元素都在QtQuick模块中，通常我们在导入声明中首先包含这个模块。  
> id是个特殊的属性，它可以作为一个标识符在当前文档内引用对应的元素。

> 注意：id被定义后无法再改变，在程序执行期间也无法被赋值。使用root作为根元素id仅仅是作者的习惯，这样可以在复杂的QML文档中快速引用最顶层元素。

我们使用分离的风车竿和风车的图片作为前景元素。  
![在这里插入图片描述][20210206152805304.png]  
![在这里插入图片描述][20210206152812166.png]

风车竿需要放置在背景的水平居中位置，并且竿的底部与背景底部平行。风车需要放置在背景中央位置。

通常用户界面由不同的类型的元素组成，而不是像这个示例只有图像。

Image {
        id: root
        ...
        Image {
            id: pole
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            source: "images/pole.png"
        }
    
        Image {
            id: wheel
            anchors.centerIn: parent
            source: "images/pinwheel.png"
        }
        ...
    }

为了将风车放在中央，我们需要使用一个较复杂的属性anchor。锚点可以指定对象与父对象和同级对象的相对几何位置，比如定义元素放在另一个元素的中央（anchors.centerIn: parent）。锚点定义时两端都可以定义元素的左侧（left）、右侧（right）、顶部（top）、底部（bottom）、居中（centerIn）、填充（fill）、垂直居中（verticalCenter ）和水平居中（horizontalCenter ）相对位置。当然它们必须是可以匹配，无法定义一个元素的左侧与另一个元素的顶部对齐。

这样我就能设置风车的位置在我们背景元素的中央了。

为了让我们的展示更加有趣一点，我们应该让程序有一些交互功能。当用户点击场景上某个位置时，让我们的风车转动起来。

我们使用mouseArea元素，并且让它与我们的根元素大小一样。

Image {
        id: root
        ...
        MouseArea {
            anchors.fill: parent
            onClicked: wheel.rotation += 90
        }
        ...
    }

当用户点击覆盖区域时，鼠标区域会发出一个信号。你可以重写onClicked函数来链接这个信号。在这个案例中引用了风车的图像并且让他旋转增加90度。

> 对于每个工作的信号，命名方式都是on + SignalName的标题。当属性的值发生改变时也会发出一个信号。它们的命名方式是：on + PropertyName + Chagned。 如果一个宽度（width）属性改变了，你可以使用onWidthChanged: print(width)来得到这个监控这个新的宽度值。

现在风车将会旋转，但是还不够流畅。风车的旋转角度属性被直接改变了。我们应该怎样让90度的旋转可以持续一段时间呢。现在是动画效果发挥作用的时候了。一个动画定义了一个属性的在一段时间内的变化过程。为了实现这个效果，我们使用一个动画类型叫做属性行为。这个行为指定了一个动画来定义属性的每一次改变并赋值给属性。每次属性改变，动画都会运行。这是QML中声明动画的几种方式中的一种方式。

Image {
        id: root
        Image {
            id: wheel
            Behavior on rotation {
                NumberAnimation {
                    duration: 250
                }
            }
        }
    }

现在每当风车旋转角度发生改变时都会使用NumberAnimation来实现250毫秒的旋转动画效果。每一次90度的转变都需要花费250ms。

按照上面的流程，可以写出如下的代码。

**qmltest.qml程序**

import QtQuick 2.0
    
    Image {
        id: root
        source: "images/background.png"
        MouseArea{
            anchors.fill: parent
            onClicked: wheel.rotation += 90
        }
    
        Image{
            id:pole
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            source: "images/pole.png"
        }
    
        Image{
            id:wheel
            Behavior on rotation {
                NumberAnimation{
                    duration: 250
                }
            }
    
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            source: "images/pinwheel.png"
        }
    
    }

# 三、运行代码 #

选择qmltest.qml右键->Open Commonda Prompt With->Run Enveriment

输入命令：`qml qmltest.qml`  
![在这里插入图片描述][20210206153245841.png]  
可得到如下动画。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70]: /images/20221024/4fb1e77f7240435eb5f20f562b67b705.png
[https_qmldoc.cn_meet_qt_5_qt5_introduction.html]: https://qmldoc.cn/meet_qt_5/qt5_introduction.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 1]: /images/20221024/38cf1c4ca0cd43a6bc9d61e73224574f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 2]: /images/20221024/3f90fc0f9a8b4270a85a8c06ca92ae90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 3]: /images/20221024/bc8e915a153b42708c6bb0f02672f6b0.png
[background]: /images/20221024/34bdb2e1976247dd824f7fbad0c080fe.png
[20210206152805304.png]: /images/20221024/ce0a0c59e21b4963a55c6097b80dd990.png
[20210206152812166.png]: /images/20221024/8ee73523ecb14979a17f7d83d74c1185.png
[20210206153245841.png]: /images/20221024/4111bb9962c84c81b05a24694c69b3a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70 4]: /images/20221024/9440757209234152a5b034085a95c6ab.png