QT Quick（C++）跨平台应用程序项目实战教程 4 — QML基本使用方法
目录
引言
1. 元素嵌套
2. 属性绑定
3. 按钮及响应事件
4. 信号与槽
5. 内嵌JavaScript
6. 动画
7. 布局
8. 自定义组件
9. 状态切换
前面章节完成了基本的程序设置。本章内容介绍QML的基本使用方法。
引言
QML（Qt Meta-Object Language）是一种用于构建用户界面的声明性语言，通常与Qt框架一起使用，允许开发者以简洁、直观的方式描述用户界面。与传统的命令式编程相比，声明式语法更接近自然语言，代码更易读、易维护。
QML 非常适合快速构建界面原型。开发者可以快速创建和修改界面，实时预览效果，极大地提高了开发效率。
QML 与 C++ 可以无缝集成，适合需要高性能和复杂逻辑的应用场景：
-
C++ 负责处理业务逻辑、数据管理和性能关键部分。
-
QML 负责界面设计和用户交互。
-
通过 Qt 的信号与槽机制，QML 和 C++ 可以轻松通信。
1. 元素嵌套
一个QML文件通常以导入Qt模块开始，然后定义一个根元素，在根元素中可以嵌套子元素。以下是经过修改过后的“音乐播放器程序”代码：
import QtQuick
Window {
width: 1200
height: 800
visible: true
title: qsTr("音乐播放器")
Rectangle {
anchors.centerIn: parent
width: 200
height: 100
color: "lightblue"
}
}-
import QtQuick：导入QtQuick模块。 -
Window：定义一个窗口，该窗口具备基本的最小化、最大化、关闭按钮。
-
Rectangle：在Window中定义一个矩形元素，该矩形元素是Window的子元素。 -
anchors.centerIn：矩形锚点。在上述代码中表示该矩形出现在父窗体Window的中心。
-
color：设置矩形的背景颜色。
运行效果如下：
2. 属性绑定
修改前面代码中的Rectangle部分：
Rectangle {
anchors.centerIn: parent
width: 200
height: width * 2 // 高度是宽度的2倍
color: "lightblue"
}在代码中指定height是width的两倍，运行后效果如下图所示：
3. 按钮及响应事件
按钮控件在桌面程序开发中非常重要。在Rectangle下面添加一段代码如下：
Button {
id: myButton
text: "测试按钮"
anchors.top: parent.top
anchors.left: parent.left
onPressed: {
console.log("Button pressed!")
}
onReleased: {
console.log("Button released!")
}
onClicked: {
console.log("Button clicked!")
}
}上述代码定义了一个 QML 中的 Button 组件，该按钮具备特定的位置、文本显示，并且能够处理按下、释放和点击三种不同的交互事件，同时会在相应事件触发时在控制台输出对应的提示信息。
为了能够在QML中准确使用Button组件，需要在qml文件头部引用：
import QtQuick.Controls运行效果如下：
按下按钮并放开后，在Qt Creator的应用程序输出界面依次输出下述内容：
上述方式也是一种常见的qml代码调试方式。
4. 信号与槽
Qt 的信号与槽是用于对象间通信的机制。信号是对象状态改变或特定事件发生时发出的特殊函数，无需实现代码；槽是普通成员函数，可响应信号。当信号发出，对应槽函数自动调用。
QML同样支持信号与槽机制，用于处理用户交互。
重新修改Main.qml代码，如下：
import QtQuick
import QtQuick.Controls
Window {
width: 1200
height: 800
visible: true
title: qsTr("音乐播放器")
Text {
id: myText
text: "你好世界"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
myText.text = "Qt Quick教程"
}
}
}上述 QML 代码创建了一个宽 1200、高 800 的可见窗口，标题为 “音乐播放器”。窗口中心显示文本 “你好世界”，同时设置了一个覆盖整个窗口的鼠标区域，当点击窗口任意位置时，文本内容会变为 “Qt Quick 教程”。
注意上述代码中MouseArea中的onClicked事件是通过Text的id号来找到对应的组件的，这是qml中最基本的组件查找方式。
运行效果如下（单击前后效果图）：
5. 内嵌JavaScript
QML支持内嵌JavaScript代码。具体示例如下：
import QtQuick
import QtQuick.Controls
Window {
width: 1200
height: 800
visible: true
title: qsTr("音乐播放器")
Text {
id: myText
text: "单击"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
myText.text = "单击 " + Math.random().toFixed(2)
}
}
}
上述 QML 代码在窗口中心放置了一个 Text 组件，初始文本为 “单击”。同时，设置了一个覆盖整个窗口的 MouseArea 组件用于监听鼠标点击事件。当用户点击窗口任意位置时，onClicked 信号处理函数会将 Text 组件的文本更新为 “单击” 加上一个保留两位小数的随机数。注意这里使用了JavaScript代码来实现两位随机数的生成。
Math.random().toFixed(2)：生成一个随机数并保留两位小数。
运行后效果如下：
6. 动画
QML支持简单的动画效果。完整代码如下：
import QtQuick
import QtQuick.Controls
Window {
width: 1200
height: 800
visible: true
title: qsTr("音乐播放器")
Text {
id: myText
text: "Hello, QML!"
anchors.centerIn: parent
}
NumberAnimation {
target: myText
property: "opacity"
from: 1.0
to: 0.0
duration: 1000
running: true
}
}上述QML 代码在窗口中心有个 Text 组件显示 “Hello, QML!”。同时使用 NumberAnimation 对 Text 组件的 opacity 属性进行动画操作，使其透明度从 1.0（完全不透明）在 1000 毫秒内变为 0.0（完全透明），且动画创建后立即开始运行。
7. 布局
QML提供了多种布局方式，如Row、Column、Grid等。示例代码如下：
import QtQuick
import QtQuick.Controls
Window {
width: 1200
height: 800
visible: true
title: qsTr("音乐播放器")
Row {
spacing: 10
Rectangle {
width: 50
height: 50
color: "red"
}
Rectangle {
width: 50
height: 50
color: "green"
}
Rectangle {
width: 50
height: 50
color: "blue"
}
}
}上述 QML 代码在窗口内设置了一个 Row 布局容器，其内部元素间距为 10。Row 中包含三个 Rectangle 组件，每个宽度和高度均为 50，颜色分别为红色、绿色和蓝色，这些矩形会按水平方向排列在窗口中。
运行后效果如下：
8. 自定义组件
qml支持自定义组件，从而实现组件复用。
在文件列表中右键，选择“添加新文件”，然后选择QML File，如下图所示：
这样就添加了一个名称为CustomButton的组件。下面对该组件内容进行修改。完整代码如下：
// CustomButton.qml
import QtQuick
Rectangle {
// 自定义属性
property alias text: buttonText.text // 按钮文本
signal clicked // 点击信号
width: 100
height: 50
color: "lightgreen"
radius: 5 // 圆角
Text {
id: buttonText
text: "Button"
anchors.centerIn: parent
font.pixelSize: 16
}
MouseArea {
anchors.fill: parent
onClicked: parent.clicked() // 触发点击信号
}
}
上述代码自定义了一个 QML 组件 CustomButton.qml，用于创建自定义按钮。它导入 QtQuick 模块，基于 Rectangle 实现。定义了 text 属性用于设置按钮文本，通过 property alias 关联到内部 Text 组件的 text 属性；声明了 clicked 信号用于表示按钮被点击。按钮宽 100、高 50，背景为浅绿色且有圆角。内部 Text 组件显示按钮文本，居中显示，字体大小 16。MouseArea 覆盖整个按钮区域，当点击时触发 parent.clicked() 发出 clicked 信号。
修改好以后就可以直接在Main.qml文件中使用上述自定义组件。Main.qml的完整内容如下：
import QtQuick
import QtQuick.Controls
Window {
width: 1200
height: 800
visible: true
title: qsTr("音乐播放器")
Column {
spacing: 10
anchors.centerIn: parent
// 使用自定义按钮组件
CustomButton {
text: "Button 1"
onClicked: console.log("Button 1 clicked!")
}
CustomButton {
text: "Button 2"
onClicked: console.log("Button 2 clicked!")
}
}
}上述QML在窗口内设置了一个垂直布局的 Column 容器，元素间距为 10 并居中显示。在 Column 中使用了自定义按钮组件 CustomButton，创建了两个按钮，分别设置文本为 “Button 1” 和 “Button 2”，当点击 “Button 1” 时在控制台输出 “Button 1 clicked!”，点击 “Button 2” 时输出 “Button 2 clicked!”。
运行后效果如下：
9. 状态切换
QML 支持状态（State），可以轻松管理界面的不同状态（如正常状态、点击状态、加载状态等）。
完整代码如下：
import QtQuick
Window {
width: 1200
height: 800
visible: true
title: qsTr("音乐播放器")
Rectangle {
width: 200
height: 100
color: "lightblue"
state: "normal"
states: [
State {
name: "normal"
PropertyChanges { target: myText; text: "Normal" }
},
State {
name: "clicked"
PropertyChanges { target: myText; text: "Clicked!" }
}
]
Text {
id: myText
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: parent.state = "clicked"
}
}
}
上述代码在 Window 内创建了一个 Rectangle，宽度 200、高度 100，背景颜色为浅蓝色。该 Rectangle 定义了两种状态：normal 和 clicked。在 normal 状态下，myText 显示 “Normal”；在 clicked 状态下，myText 显示 “Clicked!”。
Text 组件的 id 为 myText，并通过 anchors.centerIn: parent 使其在 Rectangle 中居中显示。
MouseArea 组件覆盖整个 Rectangle，当点击时，会将 Rectangle 的状态设置为 clicked，从而改变 myText 的显示内容。整体而言，代码实现了一个简单的交互界面，点击特定区域时会改变文本显示。
运行后效果如下：
单击矩形框区域后，效果如下：
上一章：QT Quick（C++）跨平台应用程序项目实战教程 3 — 项目基本设置（窗体尺寸、中文标题、窗体图标、可执行程序图标）-CSDN博客
下一章：