Qt Quick 教程：从零开始

Qt Quick 是 Qt 框架中用于创建动态、流畅用户界面（UI）的强大模块。它结合了声明式语言 QML 和高性能的 C++ 后端，让开发者能够快速构建具有现代感和响应性的应用程序，尤其适合触摸屏设备、嵌入式系统以及桌面应用。本教程将引导你从零开始，逐步掌握 Qt Quick 的核心概念。

1. 什么是 Qt Quick？

Qt Quick 是一套基于 QML（Qt Meta-Object Language）的 UI 技术。QML 是一种声明式语言，用于描述 UI 的外观和行为。与传统的 C++ 小部件（Widgets）不同，QML 更加直观、简洁，尤其擅长处理动画、过渡和自定义图形。

核心组件：

QML: 声明式 UI 语言，用于定义 UI 元素、布局、动画和交互。
Qt C++: 提供强大的后端功能，如数据处理、网络通信、硬件集成等。QML 可以通过 C++ 扩展，访问复杂的业务逻辑。
Qt Quick Controls: 一套预构建的、可定制的 UI 控件，如按钮、文本输入框、滑块等，方便快速构建应用。

2. 为什么选择 Qt Quick？

开发效率高: QML 的声明式语法和热重载特性使得 UI 开发变得非常快速。
跨平台: Qt Quick 应用可以在 Windows、macOS、Linux、Android、iOS 和嵌入式设备上运行，代码只需编写一次。
高性能: 渲染由底层的 C++ 和图形硬件加速完成，确保流畅的用户体验。
美观与定制: 容易创建高度定制化和视觉吸引力的 UI。
与 C++ 无缝集成: 可以轻松地将 QML 与现有的 C++ 业务逻辑结合。

3. 环境搭建

要开始 Qt Quick 开发，你需要安装 Qt Creator IDE 和 Qt SDK。

下载 Qt Online Installer: 访问 Qt 官方网站下载适用于你操作系统的在线安装程序。
运行安装程序:
- 登录或创建 Qt 账户。
- 选择安装目录。
- 在“选择组件”步骤，确保勾选至少以下选项：
  - Qt Versions: 选择一个最新的 Qt 版本（例如 Qt 6.x.x 或 Qt 5.x.x），并确保勾选你目标平台的编译器（例如，Windows 上是 MinGW 或 MSVC，macOS 上是 Clang）。
  - Developer and Designer Tools: 勾选 Qt Creator。
  - Qt Charts, Qt Data Visualization, Qt Quick 3D 等可选模块（如果未来可能用到）。
- 完成安装。
启动 Qt Creator: 安装完成后，打开 Qt Creator IDE。

4. 创建第一个 Qt Quick 项目

现在，让我们创建一个简单的 Qt Quick 应用程序。

打开 Qt Creator。
点击 “New Project” (或文件 -> 新建文件或项目)。
选择 “Application” -> “Qt Quick Application” -> “Choose…”。
项目名称和路径:
- Name: MyFirstQmlApp
- Path: 选择一个合适的项目存储路径。
- 点击 “Next”。
构建系统: 保持默认的 “CMake” 或 “QMake”，点击 “Next”。
Qt Quick 版本: 选择最新的 Qt Quick 版本（例如 “Qt 6.x” 或 “Qt 5.x”），点击 “Next”。
项目设置: 保持默认设置，点击 “Next”。
Kit 选择: 勾选你安装的 Qt 版本和编译器套件，点击 “Next”。
版本控制: 可以选择不使用版本控制，点击 “Finish”。

Qt Creator 将会自动生成一个基本的 Qt Quick 项目结构。

5. 项目结构概览

一个典型的 Qt Quick 项目包含以下主要文件：

CMakeLists.txt (或 .pro 文件): 项目的构建配置文件。
main.cpp: C++ 程序的入口点。它负责创建 QGuiApplication 实例和 QQmlApplicationEngine，并加载 QML 文件。
main.qml: 应用程序的根 QML 文件，定义了 UI 的主体结构。

main.cpp (核心代码片段):

“`cpp

include

int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv); // 创建 GUI 应用程序实例

QQmlApplicationEngine engine; // 创建 QML 引擎
const QUrl url(u"qrc:/MyFirstQmlApp/main.qml"_qs); // 加载 main.qml
QObject::connect(&engine, &QQmlApplicationEngine::objectCreationFailed,
    &app, []() { QCoreApplication::exit(-1); }, Qt::QueuedConnection);
engine.load(url); // 启动 QML 应用程序

return app.exec(); // 进入事件循环

}
“`

main.qml (初始内容):

“`qml
import QtQuick
import QtQuick.Window

Window {
width: 640
height: 480
visible: true
title: qsTr(“MyFirstQmlApp”) // 窗口标题

Text {
    anchors.centerIn: parent // 文本居中
    text: qsTr("Hello, Qt Quick!") // 显示文本
    font.pointSize: 24
}

}
“`

6. 理解 `main.qml`

让我们仔细看看 main.qml：

import QtQuick: 导入 Qt Quick 模块，提供基本的 UI 元素（如 Rectangle, Text, Image 等）。
import QtQuick.Window: 导入窗口模块，提供 Window 组件。
Window { ... }: 定义了一个应用程序窗口。
- width, height: 窗口的尺寸。
- visible: true: 使窗口可见。
- title: qsTr("MyFirstQmlApp"): 设置窗口标题。qsTr 用于国际化。
Text { ... }: 定义了一个文本元素，作为 Window 的子元素。
- anchors.centerIn: parent: 使用锚点（anchors）系统将文本元素在其父元素（这里是 Window）中居中。Qt Quick 的布局主要依赖于锚点和位置属性。
- text: qsTr("Hello, Qt Quick!"): 设置文本内容。
- font.pointSize: 24: 设置字体大小。

7. 运行你的第一个应用

在 Qt Creator 中，点击左下角的绿色“运行”按钮 (或 Ctrl+R)。你将看到一个带有“Hello, Qt Quick!”字样的窗口。

8. QML 基础概念

8.1 元素与属性

QML 中的所有 UI 元素都是对象，它们有各种属性来定义它们的外观和行为。

“`qml
Rectangle { // 矩形元素
width: 100
height: 50
color: “blue” // 颜色属性
radius: 5 // 圆角属性

Text { // 子元素
    text: "Click Me"
    color: "white"
    anchors.centerIn: parent // 相对于父元素居中
}

}
“`

8.2 锚点（Anchors）

锚点是 Qt Quick 中最常用的布局方式，用于定义元素相对于其他元素的位置和大小。

anchors.fill: parent: 填充父元素。
anchors.left: parent.left: 左边缘对齐父元素的左边缘。
anchors.right: otherItem.left: 右边缘对齐 otherItem 的左边缘。
anchors.horizontalCenter: parent.horizontalCenter: 水平居中。
anchors.margins: 边距。

8.3 事件与信号/槽

QML 元素可以响应用户输入（如鼠标点击、键盘事件）。这通过信号（signals）和槽（slots）机制实现。

“`qml
Rectangle {
width: 100; height: 100
color: “red”

MouseArea { // 鼠标区域，用于捕获鼠标事件
    anchors.fill: parent
    onClicked: { // 当被点击时触发
        console.log("Rectangle clicked!"); // 输出到控制台
        parent.color = "green"; // 改变父元素的颜色
    }
}

}
“`

8.4 状态机（States）与动画（Animations）

Qt Quick 擅长创建流畅的动画和 UI 状态转换。

“`qml
Rectangle {
id: myRect
width: 100; height: 100
color: “blue”

MouseArea {
    anchors.fill: parent
    onClicked: {
        myRect.state = (myRect.state === "expanded" ? "" : "expanded"); // 切换状态
    }
}

states: [ // 定义状态
    State {
        name: "expanded"
        PropertyChanges { target: myRect; width: 200; height: 200; color: "green" }
    }
]

transitions: [ // 定义状态间的过渡动画
    Transition {
        from: ""; to: "expanded"
        ColorAnimation { duration: 500 } // 颜色动画，持续 500 毫秒
        PropertyAnimation { properties: "width,height"; duration: 500 } // 尺寸动画
    }
]

}
“`

8.5 组件（Components）

你可以将 QML 代码组织成可重用的组件，提高代码的模块化和复用性。

MyButton.qml:

“`qml
import QtQuick
import QtQuick.Controls

Button {
text: “Custom Button”
onClicked: {
console.log(“My custom button was clicked!”)
}
// 可以添加更多定制样式
}
“`

在 main.qml 中使用：

“`qml
import QtQuick
import QtQuick.Window
import “MyButton.qml” // 导入自定义组件

Window {
width: 640; height: 480; visible: true; title: “Custom Button App”

MyButton {
    anchors.centerIn: parent
}

}
“`

9. QML 与 C++ 交互

Qt Quick 的强大之处在于它能与 C++ 后端紧密结合。你可以将 C++ 对象暴露给 QML，让 QML 调用 C++ 函数，或者 C++ 监听 QML 信号。

步骤概述：

在 C++ 中定义 QObject 派生类：
“`cpp
// mybackend.h
#ifndef MYBACKEND_H
#define MYBACKEND_H

include

include

class MyBackend : public QObject
{
Q_OBJECT // 必须包含 Q_OBJECT 宏

public:
explicit MyBackend(QObject *parent = nullptr);
```
Q_INVOKABLE void cppFunction(); // 使用 Q_INVOKABLE 宏暴露给 QML
```
signals:
void dataReady(const QString &data); // 暴露信号给 QML

public slots:
void qmlTriggeredSlot(const QString &message); // 响应 QML 信号的槽
};

endif // MYBACKEND_H

“`

“`cpp
// mybackend.cpp

include “mybackend.h”

MyBackend::MyBackend(QObject *parent) : QObject(parent)
{
}

void MyBackend::cppFunction()
{
qDebug() << “C++ function called from QML!”;
emit dataReady(“Hello from C++!”); // 发送信号给 QML
}

void MyBackend::qmlTriggeredSlot(const QString &message)
{
qDebug() << “QML triggered C++ slot with message:” << message;
}
“`

在 main.cpp 中将 C++ 对象注册到 QML 引擎：
“`cpp
// main.cpp
#include
#include
#include // 引入 QQmlContext
#include “mybackend.h” // 引入你的 C++ 后端类

int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);

QQmlApplicationEngine engine;

MyBackend backend; // 创建 C++ 对象
// 将 C++ 对象注册为 QML 上下文属性，名称为 "myBackend"
engine.rootContext()->setContextProperty("myBackend", &backend);

const QUrl url(u"qrc:/MyFirstQmlApp/main.qml"_qs);
QObject::connect(&engine, &QQmlApplicationEngine::objectCreationFailed,
    &app, []() { QCoreApplication::exit(-1); }, Qt::QueuedConnection);
engine.load(url);

return app.exec();

}
“`

在 main.qml 中访问 C++ 对象：
“`qml
import QtQuick
import QtQuick.Window
import QtQuick.Controls

Window {
width: 640
height: 480
visible: true
title: qsTr(“QML C++ Interop”)

Column {
    anchors.centerIn: parent
    spacing: 10

    Button {
        text: "Call C++ Function"
        onClicked: {
            myBackend.cppFunction(); // 调用 C++ 中的函数
        }
    }

    Text {
        id: dataText
        text: "Waiting for data from C++..."
        font.pointSize: 18
    }

    Button {
        text: "Trigger C++ Slot"
        onClicked: {
            myBackend.qmlTriggeredSlot("Hello from QML!"); // 调用 C++ 中的槽
        }
    }
}

// 监听 C++ 发送的信号
Connections {
    target: myBackend
    function onDataReady(data) { // QML 信号处理器
        dataText.text = "Received from C++: " + data;
    }
}

}
“`

10. 进阶学习方向

Qt Quick Controls 2: 学习如何使用 Qt 提供的现代 UI 控件来构建应用。
ListView, GridView, Repeater: 用于显示列表和网格数据。
模型/视图编程: 了解如何将数据模型（C++ 或 QML）与视图（ListView 等）结合。
自定义 QML 类型: 使用 qmlRegisterType 在 C++ 中创建和注册自定义 QML 类型。
多线程: 在 C++ 后端中使用多线程处理耗时操作，避免阻塞 UI。
国际化 (i18n): 为你的应用添加多语言支持。
打包与部署: 学习如何打包你的 Qt Quick 应用并发布到不同平台。
Qt Quick 3D: 如果你需要三维 UI 或场景，可以探索 Qt Quick 3D 模块。

总结

本教程带你从零开始了解了 Qt Quick 的基本概念、环境搭建、项目创建，并深入探讨了 QML 的核心语法和与 C++ 交互的方式。Qt Quick 是一个功能强大且富有表现力的框架，通过不断练习和探索，你将能够创建出令人惊艳的跨平台用户界面。祝你的 Qt Quick 学习之旅顺利！

Qt Quick 教程：从零开始

1. 什么是 Qt Quick？

2. 为什么选择 Qt Quick？

3. 环境搭建

4. 创建第一个 Qt Quick 项目

5. 项目结构概览

include

include

6. 理解 main.qml

7. 运行你的第一个应用

8. QML 基础概念

8.1 元素与属性

8.2 锚点（Anchors）

8.3 事件与信号/槽

8.4 状态机（States）与动画（Animations）

8.5 组件（Components）

9. QML 与 C++ 交互

include

include

endif // MYBACKEND_H

include “mybackend.h”

10. 进阶学习方向

总结

6. 理解 `main.qml`