当前位置：首页 > news >正文

2、Qt6 Quick 会转的小风车

news 2024/11/5 20:25:02

一、添加窗体背景

1、添加图像文件

在上节我们创建的项目根目录创建文件夹：images，复制图像文件到该目录：
在这里插入图片描述
添加文件到项目中：

选择图像目录：

2、修改Main.qml

import QtQuick
import QtQuick.VirtualKeyboard
Window {width: root.widthheight: root.heightvisible: trueImage {id: rootvisible: truesource: "images/background.png"}
}

说明：
所有的 QML 文件都将带有后缀.qml。作为标记语言（如 HTML），QML 文档需要有且只有一个根类型。
这里我们添加一个张图像做为窗体的背景，通过id引用图像的大小作为窗体大小。
::: 提示每种类型都有属性。例如，图像具有属性width和height，每个属性都包含像素数。它还具有其他属性，例如source。由于图像类型的大小是从图像大小自动派生而来的，因此我们不需要自己设置width和height属性。
大多数标准类型位于QtQuick模块中，可通过文件开头的 import 语句获得.qml。
id一个特殊的可选属性，它包含一个标识符，可用于在文档的其他地方引用其关联类型。
重要提示：属性id一旦设置就无法更改，也不能在运行时设置。使用root id 作为根类型的 ID 是一个基本习惯，目的是使引用较大的 QML 文档中最顶层的类型变得可预测。

运行我们将得到一个有图像的背景窗体：
在这里插入图片描述

二、添加风车杆

1、修改后的Main.qml

import QtQuick
import QtQuick.VirtualKeyboard
Window {width: root.widthheight: root.heightvisible: trueImage {id: rootvisible: truesource: "images/background.png"// 在背景图中进行嵌套Image {id: pole// 水平居中anchors.horizontalCenter: parent.horizontalCenter// 在父无素的底部anchors.bottom: parent.bottomsource: "images/pole.png"}}
}

说明：
这里我们添加了一个风车杆，让其水平居中并且底部对齐。

运行结果：
在这里插入图片描述

三、添加小风车

1、我们继续修改Main.qml，嵌套在背景图中添加小风车图像。

import QtQuick
import QtQuick.VirtualKeyboard
Window {width: root.widthheight: root.heightvisible: trueImage {id: rootvisible: truesource: "images/background.png"// 在背景图中进行嵌套Image {id: pole// 水平居中anchors.horizontalCenter: parent.horizontalCenter// 在父无素的底部anchors.bottom: parent.bottomsource: "images/pole.png"}Image{id: wheel// 在父级元素中间anchors.centerIn: parentsource: "images/pinwheel.png"}}
}

说明：
将小风车添加在窗体中间。
属性anchor。锚定允许您指定父对象和同级对象之间的几何关系。例如，将我放在另一个类型的中心（anchors.centerIn: parent）。两端有左、右、上、下、centerIn、填充、verticalCenter 和 HorizontalCenter 关系。
::: 提示有时您需要进行一些小调整，例如，将类型稍微移离中心。这可以使用anchors.horizontalCenterOffset或来完成anchors.verticalCenterOffset。所有其他锚点也具有类似的调整属性。
将图像作为根类型（Image）的子类型说明了声明性语言的一个重要概念。您可以按照图层和分组的顺序描述用户界面的视觉外观，其中最顶层（我们的背景图像）首先绘制，然后在包含类型的本地坐标系中在其上方绘制子图层。

运行结果：
在这里插入图片描述

四、小风车转起来

为了让展示更有趣，让我们让场景具有交互性。这个想法是当用户在场景中的某个地方按下鼠标时，滚轮就会旋转。

1、代码修改

import QtQuick
import QtQuick.VirtualKeyboard
Window {width: root.widthheight: root.heightvisible: trueImage {id: rootvisible: truesource: "images/background.png"// 在背景图中进行嵌套Image {id: pole// 水平居中anchors.horizontalCenter: parent.horizontalCenter// 在父无素的底部anchors.bottom: parent.bottomsource: "images/pole.png"}Image{id: wheel// 在父级元素中间anchors.centerIn: parentsource: "images/pinwheel.png"}// 将整个背景作为鼠标区域MouseArea {anchors.fill: parent// 鼠标点击时，风车旋转90度onClicked: wheel.rotation += 90}}
}

说明：
这里将整个背景作为鼠标区域，并添加了鼠标点击事件，当鼠标点击时风车会旋转90度。

在这里插入图片描述

当用户点击鼠标区域覆盖的区域时，鼠标区域会发出信号。您可以通过重写onClicked函数来连接到此信号。当连接信号时，意味着每当发出信号时都会调用它对应的函数（或多个函数）。在这种情况下，我们说当鼠标区域内有鼠标点击时，其类型id（wheel即风车图像）应旋转 +90 度。

现在，用户单击时，轮子会旋转，但旋转是一次性完成的，而不是随着时间的推移流畅地移动。为了实现流畅的运动，我们可以使用动画。动画定义了属性在一段时间内如何变化。为了达到这一目的，我们使用 Behavior 属性，该属性属于 Animation 类型。Behavior 为定义的属性指定了动画效果，每当该属性发生变化时，动画就会自动运行。这只是在 QML 中实现动画的一种方法。
在这里插入图片描述