QT编程之QML入门

一、Qt Quick与QML介绍

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

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

1、Qt Quick关键特点：

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

2、适用场景：‌

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

二、QML语法知识

 1、基本文档结构

// 导入模块（必须）
import QtQuick 2.15
import QtQuick.Controls 2.15

// 根对象（如Window、ApplicationWindow、Item等）
Window {
    id: root  // 对象标识符（唯一）
    width: 640
    height: 480
    visible: true

    // 子对象（如按钮、文本等）
    Rectangle {
        id: rect
        width: 200
        height: 100
        color: "lightblue"
    }
}

 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 语言本身提供的基本类型：

基本类型	含义
bool	布尔值，值为true/false
double	浮点数，双精度存储
enumeration	命名为枚举的值
int	整数，如0, 10, -20
list	QML对象列表
real	带小数点的数字（实数）
string	自由格式文本字符串
url	资源定位器
var	通用属性类型

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

基本类型