📚 课程目录第2章 Qt Quick基础回顾

2. Qt Quick基础回顾

在进入动画与渲染优化之前，有必要把 Qt Quick 的底层运行模型重新梳理一遍。很多性能问题并非出在动画 API 本身，而是对 QML 的声明式语法、Item 的坐标体系、场景图的构建方式、属性绑定与信号槽的执行时机理解不到位。本节围绕这五个核心概念展开，为后续的优化手段建立统一的认知基础。

一、QML 语法：声明式对象树的构建

QML 是一种声明式语言，它描述的是“界面由哪些对象组成、对象之间是什么关系”，而不是“按什么步骤去创建它们”。一个 QML 文档本质上是一棵对象树的声明，根对象通常是 Window 或 Item，子对象通过嵌套或 id 引用建立父子关系。

import QtQuick

Rectangle {
    id: root
    width: 320; height: 240
    color: "#f5f7fa"

    Rectangle {
        id: box
        x: 40; y: 40
        width: 80; height: 80
        color: "steelblue"
        radius: 8
    }
}

语法层面需要牢记三点：其一，属性赋值使用 property: value，冒号右侧可以是字面量、表达式或绑定；其二，id 是文档内的唯一标识，用于跨对象引用，但它不是属性，不能被外部访问；其三，import 决定可用类型与版本，QtQuick 与 QtQuick.Controls 的版本差异会直接影响可用属性。

二、Item 元素：可视元素的坐标与层级基础

Item 是所有可视元素的基类，它本身不绘制任何内容，但定义了位置、尺寸、层级、变换、可见性与焦点等通用能力。理解 Item 的坐标体系是理解动画位移、缩放与裁剪的前提。

x/y：相对于父项左上角的位置，不是屏幕绝对坐标。
width/height：自身尺寸，父项尺寸变化不会自动改变子项尺寸，除非使用锚点或绑定。
z：同级子项之间的堆叠顺序，z 越大越靠前，但不会改变父子关系。
anchors：锚点布局，如 anchors.centerIn: parent，本质是建立位置绑定。
transform：平移、旋转、缩放的组合，影响渲染但不改变 x/y/width/height 的逻辑值。
clip：是否裁剪超出自身边界的子项，开启会带来额外的裁剪开销。

锚点与 x/y 同时设置会产生冲突，Qt 会给出警告并可能覆盖其中一个。优化动画时，优先明确使用 x/y 还是 anchors，避免二者混用导致绑定反复求值。

三、场景图结构：从 QML 对象树到渲染树

QML 对象树是逻辑结构，真正参与渲染的是场景图（Scene Graph）。每个可视 Item 在场景图中对应一个或多个节点，节点按树形组织，最终由渲染线程遍历并提交给 GPU。理解这一层映射，才能明白为什么“改一个属性”有时只触发重绘，有时却触发整棵子树重建。

场景图的关键特性包括：节点按批次（batch）合并以减少绘制调用；不透明节点与透明节点分开处理；纹理上传与几何更新在渲染线程进行。若在动画中频繁改变会触发节点重建的属性（如改变 clip、替换 source、修改 layer.enabled），就会打断批次合并，造成帧率抖动。

四、属性绑定与信号槽：数据驱动的更新机制

属性绑定是 QML 最具特色的能力：当表达式依赖的属性发生变化时，绑定会自动重新求值并写回目标属性。它本质上是一张依赖图，Qt 在属性变化时按依赖关系传播更新。

Rectangle {
    id: root
    width: 400; height: 300

    Rectangle {
        id: indicator
        width: root.width * 0.5
        height: 20
        color: "tomato"
        x: (root.width - width) / 2
    }

    MouseArea {
        anchors.fill: parent
        onClicked: indicator.color = "seagreen"
    }
}

信号槽则负责事件驱动的命令式逻辑。QML 中常见形式是 on<Signal>: { ... }，也可用 Connections 连接外部对象。需要区分两类更新路径：

机制	触发方式	典型用途	性能注意点
属性绑定	依赖属性变化自动重算	布局、尺寸、颜色联动	绑定链过长会放大求值成本
信号槽	事件或状态变化显式触发	点击、定时、异步回调	槽内做重活会阻塞 GUI 线程
命令式赋值	直接写属性值	一次性初始化	会破坏原有绑定，需谨慎

对已建立绑定的属性执行命令式赋值，会永久移除该绑定。若在动画中反复“赋值—重建绑定”，会造成绑定图频繁重建，是常见的隐性性能陷阱。

五、案例与复盘：一个进度条动画的更新路径

假设有一个进度条，其宽度绑定到 progress 属性，而 progress 由定时器递增。更新路径为：定时器触发 → 信号槽修改 progress → 绑定重新求值 → 宽度变化 → 场景图几何节点更新 → 渲染线程重绘。若把宽度改为在槽中直接赋值，绑定被破坏，后续 progress 变化将不再驱动界面，这是初学者最常见的错误之一。

复盘要点可以归纳为一份清单：

先确认属性是“绑定驱动”还是“命令驱动”，不要混用。
检查绑定表达式是否依赖了高频变化的属性，必要时用中间属性缓存。
确认动画修改的属性是否触发场景图节点重建，优先选择 x/y/opacity/scale 等轻量属性。
避免在信号槽中执行耗时计算或同步 IO，必要时交给 WorkerScript 或 C++ 侧处理。
用 QML_PROFILER 或 Qt Creator 的 QML Profiler 观察绑定求值与场景图更新耗时。

把 QML 语法、Item 坐标、场景图映射、属性绑定与信号槽这五块串起来，就能形成一条完整的“数据变化 → 绑定求值 → 场景图更新 → GPU 渲染”的链路认知。后续讨论动画性能时，所有优化手段几乎都可以归入这条链路的某一环：减少绑定求值、避免节点重建、降低绘制批次或减轻 GUI 线程负担。