2. Qt Quick基础：QML语法、属性绑定、信号与槽、基本元素的使用

Qt Quick 是 Qt 框架中用于构建动态、流畅用户界面的现代技术栈，其核心语言 QML（Qt Meta-object Language）是一种声明式语言。与传统的命令式 C++ 界面编程不同，QML 允许开发者通过描述“界面应该是什么样”来构建应用，而非一步步指定“如何绘制”。本章将深入剖析 QML 的核心语法、属性绑定机制、信号与槽通信方式，以及 Rectangle、Text、Image 这三个最基础且高频使用的可视化元素。掌握这些内容，是后续学习动画、模型视图和自定义组件开发的基石。

上图清晰地展示了本章的知识框架：QML 语法与属性绑定构成了界面描述的基础，信号与槽机制负责处理用户交互和内部通信，而 Rectangle、Text、Image 则是构建静态界面的核心积木。三者相互配合，形成了一个完整的响应式 UI 开发闭环。下面我们将逐一深入探讨。

2.1 QML 语法精讲：从对象结构到表达式

2.1.1 核心语法规则与对象层级

QML 文件通常以 .qml 为后缀，其基本结构是一个对象树。每个对象由一对花括号 {} 定义，内部包含属性赋值和子对象。语法上，QML 遵循“类型声明 + 属性赋值”的模式，这与 JSON 类似，但功能更强大，因为它支持表达式和逻辑控制。

// 示例：一个简单的 QML 对象树
import QtQuick 2.15

Rectangle { // 根对象
    width: 400
    height: 300
    color: "lightblue"

    Text { // 子对象
        text: "Hello Qt Quick"
        anchors.centerIn: parent
        font.pixelSize: 24
    }
}

在上述代码中，Rectangle 是根对象，Text 是其子对象。属性如 width、color 通过冒号赋值。值得注意的是，anchors.centerIn: parent 是一个属性绑定，它告诉 Text 对象始终相对于其父对象居中，这是一种声明式的布局方式。

2.1.2 属性绑定：声明式 UI 的灵魂

属性绑定是 QML 最强大的特性之一。它允许将一个对象的属性值绑定到另一个表达式上，当表达式中的依赖项发生变化时，绑定属性会自动更新。这与命令式编程中“先获取值，再赋值”的模式截然不同。

例如，我们想要一个矩形宽度始终是父容器宽度的一半：

Rectangle {
    width: parent.width / 2  // 绑定表达式
    height: 100
    color: "green"
}

当 parent.width 改变时（例如窗口被拉伸），width 会自动更新。这种绑定是动态的、持续的，而非一次性赋值。

2.1.3 属性绑定的判断方法与操作流程

在实际开发中，判断一个赋值是“绑定”还是“一次性赋值”至关重要。规则如下：

• 绑定：如果赋值右侧是一个包含其他属性引用的表达式（如 width: parent.width / 2），则创建绑定。
• 一次性赋值：如果右侧是常量（如 width: 200）或一个不依赖其他属性的 JavaScript 表达式（如 width: Math.random() * 100），则仅执行一次。

操作流程上，若要强制移除绑定，可以在 JavaScript 中调用 propertyName = value 直接赋值，这会破坏原有绑定关系。在调试时，可以使用 console.log 输出属性值，观察绑定是否按预期更新。

2.1.4 常见误区：绑定失效与循环依赖

2.2 信号与槽：QML 中的事件处理与通信

2.2.1 信号与槽的基本概念

信号（Signal）用于通知外部某个事件发生了，槽（Slot）则是响应信号的函数。在 QML 中，信号与槽的连接被简化了。任何对象都可以发出信号，而响应信号的方式通常有两种：一种是使用 onSignalName 语法直接定义槽函数；另一种是使用 Connections 对象进行更灵活的连接。

2.2.2 内置信号与自定义信号

Qt Quick 提供的元素自带许多信号。例如，MouseArea 有 clicked、pressed、released 信号；TextInput 有 textChanged 信号。处理这些信号的标准写法是：

Rectangle {
    width: 200; height: 200
    color: "red"

    MouseArea {
        anchors.fill: parent
        onClicked: {
            parent.color = "blue" // 响应点击事件
        }
    }
}

自定义信号需要使用 signal 关键字声明。例如，我们创建一个自定义组件，当内部状态改变时发出信号：

// MyButton.qml
Rectangle {
    id: root
    signal clicked() // 自定义信号

    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.clicked() // 发出信号
        }
    }
}

在使用该组件时，可以这样连接：

MyButton {
    onClicked: console.log("Button was clicked!")
}

2.2.3 信号参数与 Connections 对象

信号可以携带参数。例如，signal statusChanged(string status)。在槽函数中，可以直接使用参数名访问这些值。当需要动态地连接或断开信号，或者连接一个不在当前作用域内的对象时，可以使用 Connections 对象：

Connections {
    target: myDevice
    onStatusChanged: {
        if (status === "online") {
            console.log("Device is online")
        }
    }
}

这种方式在连接 C++ 对象或动态创建的对象时非常有用。

2.2.4 实战场景：表单验证与交互反馈

假设我们有一个登录界面，需要监听输入框的文本变化并实时验证格式。我们可以利用 TextInput 的 textChanged 信号：

Rectangle {
    width: 300; height: 200
    TextInput {
        id: usernameInput
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        onTextChanged: {
            if (text.length < 3) {
                statusLabel.text = "用户名至少3个字符"
                statusLabel.color = "red"
            } else {
                statusLabel.text = "用户名格式正确"
                statusLabel.color = "green"
            }
        }
    }
    Text { id: statusLabel; anchors.bottom: parent.bottom }
}

这个例子展示了信号槽如何驱动 UI 反馈，实现了简单的实时校验逻辑。

2.3 基本元素实战：Rectangle、Text 与 Image

2.3.1 Rectangle：绘制矩形区域与视觉基础

Rectangle 是最常用的可视化元素，用于绘制填充矩形、边框和渐变。它不仅是静态背景，还可以通过修改属性实现动态效果。

属性	类型	说明	典型值/用法
color	color	填充颜色	"lightgray", "#FF8800", "transparent"
radius	real	圆角半径	4, 10
border.width	int	边框宽度	2
border.color	color	边框颜色	"black"
gradient	Gradient	渐变填充	Gradient { GradientStop {...} }

使用渐变时，需要定义 Gradient 对象：

Rectangle {
    width: 200; height: 100
    gradient: Gradient {
        GradientStop { position: 0.0; color: "white" }
        GradientStop { position: 1.0; color: "steelblue" }
    }
}

2.3.2 Text：显示与样式化文本

Text 元素用于显示文本内容。除了基本的 text 属性，字体控制是重点。

• font.family: 字体族，如 "Arial", "Microsoft YaHei"。
• font.pixelSize: 像素大小，推荐使用。
• font.bold: 是否加粗。
• color: 文本颜色。
• wrapMode: 换行模式，如 Text.WordWrap。
• horizontalAlignment: 水平对齐方式。

一个常见的需求是文本截断显示省略号。这需要设置 elide 属性：

Text {
    width: 100
    text: "这是一个很长的文本内容，需要被截断显示"
    elide: Text.ElideRight // 右侧省略
    maximumLineCount: 1
}

2.3.3 Image：加载与显示图片

Image 元素支持 PNG、JPEG、SVG 等格式。核心属性是 source，它可以是本地文件路径、资源路径（qrc:/）或网络 URL。

fillMode 属性决定了图片如何适应 Image 对象的尺寸，这是最容易混淆的地方：

fillMode 值	行为描述	适用场景
Image.Stretch	拉伸图片以填充整个区域，不保持宽高比	背景图（可能变形）
Image.PreserveAspectFit	保持宽高比缩放，完整显示图片，可能有留白	照片展示
Image.PreserveAspectCrop	保持宽高比缩放，并裁剪溢出部分以填满区域	头像、封面图
Image.Tile	平铺图片	纹理背景

例如，实现一个不裁剪不变形的头像：

Image {
    width: 80; height: 80
    source: "qrc:/images/avatar.png"
    fillMode: Image.PreserveAspectCrop
    clip: true // 裁剪超出部分
}

2.3.4 案例拆解：构建一个卡片式用户信息组件

我们将综合运用上述三个元素，构建一个简单的用户信息卡片。该卡片包含头像、用户名和简介，并具有圆角边框和阴影效果。

背景与约束：在移动应用开发中，用户信息卡片是高频组件。要求界面简洁、适配不同屏幕宽度，且图片加载失败时要有占位符。

实现步骤：

1. 创建根 Rectangle，设置宽度为 300，高度为 120，圆角半径为 8，背景色为白色，并添加灰色边框。
2. 添加一个 Image 作为头像，定位在左侧，尺寸 80x80，使用 PreserveAspectCrop 模式。
3. 添加两个 Text 元素，一个显示用户名（加粗），一个显示简介（灰色小字），位于头像右侧。
4. 为根 Rectangle 添加 layer.enabled: true 和 layer.effect 以模拟阴影（或使用 border 简单模拟）。

Rectangle {
    width: 300; height: 120
    radius: 8
    color: "#ffffff"
    border.color: "#dddddd"
    border.width: 1

    Image {
        id: avatar
        width: 80; height: 80
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.verticalCenter: parent.verticalCenter
        source: "qrc:/images/user.png"
        fillMode: Image.PreserveAspectCrop
        clip: true
        // 加载失败时显示占位符
        onStatusChanged: {
            if (status === Image.Error) {
                source = "qrc:/images/placeholder.png"
            }
        }
    }

    Text {
        id: nameText
        anchors.left: avatar.right
        anchors.leftMargin: 16
        anchors.top: avatar.top
        text: "张伟"
        font.pixelSize: 18
        font.bold: true
        color: "#333333"
    }

    Text {
        id: bioText
        anchors.left: nameText.left
        anchors.top: nameText.bottom
        anchors.topMargin: 8
        anchors.right: parent.right
        anchors.rightMargin: 16
        text: "Qt Quick 开发者，热爱技术分享。"
        font.pixelSize: 14
        color: "#888888"
        wrapMode: Text.WordWrap
        maximumLineCount: 2
        elide: Text.ElideRight
    }
}

结果与复盘：该组件实现了预期的视觉效果。通过 onStatusChanged 处理了图片加载失败的情况，增强了健壮性。使用 maximumLineCount 和 elide 保证了简介文本不会溢出。此案例展示了如何将基础元素组合成可复用的 UI 模块。

2.4 总结与最佳实践

本章我们系统地学习了 QML 的语法基础、属性绑定、信号槽机制以及三个核心基本元素。属性绑定是 QML 声明式编程的基石，它让 UI 状态管理变得直观；信号槽则是交互逻辑的桥梁，连接了用户操作与界面响应。Rectangle、Text 和 Image 是构建界面的“积木”，熟练掌握它们的属性是高效开发的前提。

在下一阶段的学习中，我们将基于这些基础元素，探索如何通过状态（State）和动画（Animation）让界面“活”起来，敬请期待。