资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

Qt编程之QML入门

创作时间:

作者:

@小白创作中心

Qt编程之QML入门

引用

CSDN

https://blog.csdn.net/byxdaz/article/details/146333589

一、Qt Quick与QML介绍

Qt Quick是一个用于构建现代、高效、可扩展用户界面的框架。它是Qt开发框架的一部分，旨在通过声明性语法和JavaScript绑定来简化用户界面的设计和实现。

Qt Quick基于QML（Qt Meta-Object Language）语言，这是一种类似于JSON的声明性语言，用于描述用户界面的结构和行为。使用QML，您可以使用易于理解和编写的代码来创建用户界面，并通过使用属性绑定和信号槽机制来实现交互逻辑。

1、Qt Quick关键特点：

声明性语法：QML使用类似于CSS和JSON的语法，使得用户界面的描述更加直观和简洁。您可以声明对象、属性、信号和槽，以及定义动画和过渡效果。
组件化和重用：Qt Quick鼓励将用户界面拆分为可重用的组件。这样可以提高开发效率，并促进界面元素的一致性和可维护性。
属性绑定：通过属性绑定，您可以在QML中声明对象之间的依赖关系。当一个对象的属性发生变化时，绑定的对象会自动更新其相关属性，从而简化了手动处理界面元素之间的同步问题。
动画和过渡效果：Qt Quick提供了内置的动画和过渡效果支持，使得创建平滑的用户界面动画变得容易。您可以使用动画来改变属性值、移动、旋转、缩放和淡入淡出等。
可扩展性：Qt Quick是可扩展的，允许您根据需要编写自定义的QML组件和插件。这样可以轻松地扩展Qt Quick框架，并与其他Qt模块（如C++部分）进行交互。

2、适用场景： ‌

触屏设备应用（如工业 HMI、智能家居控制面板）‌。
动态界面需求（复杂动画、粒子效果、3D 元素）‌。
需要快速迭代 UI 设计的项目（支持热重载与可视化设计工具）‌。

二、QML语法知识

1、基本文档结构

import QtQuick.Controls 2.15// 根对象（如Window、ApplicationWindow、Item等）

2、核心语法规则

‌ (1) 导入语句 (import) ‌

必须导入所需的模块（如QtQuick、QtQuick.Controls）。
指定模块版本（如2.15），确保兼容性。

‌ (2) 对象声明 ‌

通过类型名 { ... }声明对象（如Rectangle {}）。
对象按‌ 树形结构 ‌嵌套，形成父子关系。

‌ (3) 属性赋值 ‌

语法：属性名: 值（如width: 200）。

‌ 属性绑定 ‌（动态更新）：

width: parent.width / 2 // 自动跟随父对象宽度变化

‌ (4) JavaScript 表达式 ‌

在属性中使用简单JavaScript：

color: index % 2 === 0 ? "red" : "blue"

3、 QML类型

1）基本类型
在 QML 中将指向简单数据的类型称为基本类型，比如 int 或 string 等。

QML 语言本身提供的基本类型：

Qt Quick 下面列出了模块提供的基本类型：

基本类型	含义
date	日期值
point	具有 x 和 y 属性的值
rect	具有 x, y, width, height 属性的值
size	具有 width 和 height 属性的值

2）QML 对象类型
QML 对象类型就是可以实例化 QML 对象的类型。QML 对象类型是一种可以用来声明对象的方法，方法是指定类型名称，后跟一组包含该对象属性的花括号。例如，代码中 Window 和 Text 都是对象类型。

        Rectangle { width: 100; height: 100; color: "red" }        myComponent.createObject(root)        myComponent.createObject(root, {"x": 200})

3）JavaScript 类型
QML 支持 JavaScript 对象和数组，可以通过 var 类型创建并存储任何标准的 JavaScript 类型。var 可以支持的类型：

类型	值表示
bool	true
int	10
double	1.0
real	1.0
string	“This is string”，String(“This is string”)
color	Qt.rgba(0.1, 0.1, 0.1, 0.1)
rect	Qt.rect(100, 100, 100, 100)
point	Qt.point(100, 100)
size	Qt.size(100, 100)
vector3d	Qt.vector3d(100, 100, 100)
数组	[1, “2”, (function() { return “3”; })]
对象
函数	(function() { return “OK”; })

4、关键语法元素

‌ (1) 信号与槽（事件处理） ‌

‌ 信号 ‌：对象内置的事件（如按钮的onClicked）。

‌ 槽 ‌：通过on<Signal>语法处理：

Button { onClicked: { console.log("按钮被点击！"); } }

‌ (2) 自定义属性 ‌

使用property关键字定义：
```
property int customNumber: 42
```

‌ (3) 绑定与赋值 ‌

‌ 绑定 ‌（动态更新）：

width: parent.width * 0.5 // 自动更新

‌ 赋值 ‌（静态值）：
```
width: 200 // 固定值
```

5、组件与复用

‌ (1) 定义自定义组件 ‌

使用Component或单独文件（如MyButton.qml）：

// MyButton.qml Button { text: "自定义按钮" background: Rectangle { color: "green" } }

‌ (2) 复用组件 ‌

直接引用文件名作为类型：
```
MyButton { anchors.centerIn: parent }
```

6、动态对象创建

使用Loader或Qt.createComponent()动态加载对象：
```
Loader { source: "DynamicComponent.qml" }
```

7、状态与动画

‌ (1) 状态（State） ‌

定义不同状态下的属性变化：

states: [ State { name: "expanded" PropertyChanges { target: rect; width: 300 } } ]

‌ (2) 动画（Behavior 或 Animation） ‌

平滑过渡属性变化：

Behavior on width { NumberAnimation { duration: 500 } }

8、注释

单行注释：// 注释内容
多行注释：
```
/* 多行 注释 */
```

9、完整QML文件

import QtQuick.Window 2.15import QtQuick.Controls 2.15                mainRect.color = "lightblue";                statusText.text = "按钮已点击！";            anchors.bottom: parent.bottom            anchors.horizontalCenter: parent.horizontalCenter

三、核心功能与技术

‌ QML 基础语法 ‌
- ‌ 属性绑定 ‌：通过 property 定义动态属性，支持表达式自动更新（如 width: parent.width * 0.5）‌。
- ‌ 信号与槽 ‌：使用 signal 定义自定义信号，通过 on<Signal> 或 Connections 实现响应‌。
- ‌ 组件复用 ‌：通过 Component 或独立 .qml 文件封装可重用 UI 元素‌。
‌ 布局管理 ‌
- ‌ 内置布局器 ‌：如 Column（垂直排列）、Row（水平排列）、Grid（网格布局），支持 spacing 控制间距‌。
- ‌ 锚点布局 ‌：通过 anchors 属性实现控件相对定位（如 anchors.centerIn: parent）‌。

四、开发环境搭建

‌ 安装 Qt 工具链 ‌
- 通过 Qt 官方在线安装程序选择 ‌ Qt Quick 组件 ‌（含 Qt Creator、Qt Quick Designer）‌。
- 确保勾选对应平台的编译套件（如 Android NDK、Windows MSVC）‌。
‌ 新建 Qt Quick 项目 ‌
- 在 Qt Creator 中选择 ‌ Qt Quick Application ‌ 模板，配置 QML 文件与 C++ 后端交互（可选）‌。
- 设置资源文件（如图标、字体）以适配多分辨率屏幕‌。

五、开发流程

与Quick相关的有四种常见的项目模板或布局模式：Empty、Scroll、Stack和Swipe。 分别适用于不同的界面场景：

1）. ‌ Empty（空模板） ‌

‌ 用途 ‌：创建一个基础空白窗口，不含任何预设布局组件，适合完全自定义的界面开发。
‌ 特点 ‌：
- 仅包含Window组件和基础属性（如窗口尺寸、标题）‌。
- 开发者需手动添加控件和布局逻辑。
‌ 示例代码 ‌：

2）. ‌ Scroll（滚动布局） ‌

‌ 用途 ‌：实现可滚动内容的界面，适合列表数据或超出视图范围的内容展示。
‌ 核心组件 ‌：
- ScrollView：提供滚动容器，通常包裹ListView或Flickable‌。
- ListView：用于显示线性列表数据，支持滚动‌。
- Flickable：更底层的滚动组件，允许自定义拖动交互‌。
‌ 特点 ‌：
- 自动生成滚动条，支持垂直或水平滚动‌。
- 适用于动态数据加载（如长列表）‌。

‌ 示例代码 ‌：

        delegate: ItemDelegate { text: "Item " + index }

3）. ‌ Stack（堆栈布局） ‌

‌ 用途 ‌：管理多个页面的堆栈式导航（如页面切换）。
‌ 核心组件 ‌：
- StackView：管理页面堆栈，支持推入（push）、弹出（pop）等操作‌。
‌ 特点 ‌：
- 页面切换时保留历史记录，支持返回操作‌。
- 适合向导式界面或多步骤流程‌。
‌ 示例代码 ‌：

4）. ‌ Swipe（滑动布局） ‌

‌ 用途 ‌：实现左右滑动切换页面的交互效果。
‌ 核心组件 ‌：
- SwipeView：提供滑动容器，可包含多个子页面‌。
‌ 特点 ‌：
- 支持手势滑动切换，常用于移动端标签页或轮播图‌。
- 结合TabBar可实现标签与滑动联动‌8。
‌ 示例代码 ‌：

对比总结

模板/布局	核心组件	适用场景	交互特性
‌ Empty ‌	`Window`	完全自定义界面	无预设交互逻辑
‌ Scroll ‌	`ScrollView`+`ListView`	长列表、可滚动内容	滚动条或拖动滚动
‌ Stack ‌	`StackView`	多页面导航（如返回栈）	页面推入/弹出
‌ Swipe ‌	`SwipeView`	滑动切换页面（如标签页）	手势左右滑动

开发步骤：

1）使用Qt Creator直接新建工程，有如下选项。

2）这里选择"Empty"，后续选择下一步。

3）Qt version选择实际上本电脑上安装的版本。如果没有对应的话，Kits界面中无法选择对应的编译器。

4）继续选择下一步。

5）Kits中选择编译器版本。 6）继续下一步，点击“完成”。

7）在这里，可以输入一些自己的代码，比如：

import QtQuick.Window 2.2    title: qsTr("Hello World")        y: rocket.y + rocket.height + 20        horizontalAlignment: Text.AlignHCenter

8）点击“设计”，可以在UI编辑器中修改qml。

9）修改完成之后，保存。编译运行，查看测试效果。

六、高级技巧

‌ 混合编程模式 ‌
- ‌ QML 调用 C++ ‌：通过 Q_INVOKABLE 暴露 C++ 方法，或使用 QtGlobal 对象实现数据交互‌。
- ‌ 嵌入 Widgets ‌：在传统 Qt Widgets 应用中通过 QQuickWidget 显示 QML 界面‌。
‌ 调试与热重载 ‌
- 使用 Qt Creator 的 ‌ QML Debugger ‌ 实时预览 UI 修改，无需重新编译‌。
- 通过 console.log() 输出调试信息，结合 ‌ Qt Quick Profiler ‌ 分析性能瓶颈‌。