3. Qt Quick基础

Qt Quick 是 Qt 面向现代 HMI 的声明式 UI 技术栈，其核心语言是 QML。在车载 HMI 项目中，仪表、中控、HUD 等界面往往需要流畅动画、多屏适配和实时数据绑定，QML 的“声明式描述 + JavaScript 逻辑 + C++ 后端”组合正好匹配这类需求。本节从语法、元素属性、信号槽、JS 集成到环境搭建，建立可落地的开发基础。

一、QML 语言语法：声明式对象树

QML 文件由若干对象声明组成，每个对象以类型名开头，后跟一对花括号，括号内是属性、信号、函数和子对象。对象之间通过父子关系形成一棵对象树，父对象负责子对象的生命周期与坐标系统。QML 不是命令式脚本，而是“描述界面长什么样”，运行时由 Qt Quick 引擎解释并渲染。

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    id: root
    width: 800; height: 480
    color: "#101820"

    Text {
        id: title
        anchors.centerIn: parent
        text: "车载 HMI"
        color: "#E6F1FF"
        font.pixelSize: 32
    }
}

要点：import 引入模块；id 是对象在文件内的唯一引用名；属性赋值使用 属性: 值；分号可省略但建议保留。QML 对大小写敏感，类型名首字母大写，属性名首字母小写。

二、元素与属性：布局、锚定与绑定

Qt Quick 提供两类基础元素：可视化元素（Item、Rectangle、Text、Image）和非可视化元素（Timer、Connections、Animation）。Item 是所有可视化元素的基类，拥有 x/y/width/height、anchors、visible、opacity 等通用属性。

属性绑定是 QML 的灵魂：当表达式依赖的属性变化时，绑定会自动重新求值。例如 width: parent.width * 0.5 会随父对象宽度变化而更新。锚定（anchors）用于相对定位，比绝对坐标更适合多分辨率车机屏幕。

三、信号与槽：事件驱动交互

QML 中对象可以定义信号，信号通过 signal 声明，使用 on<SignalName> 语法连接处理函数。内置信号如 MouseArea.clicked、Button.clicked 可直接响应。自定义信号适合封装业务事件，例如“档位切换”“报警触发”。

Item {
    id: gearPanel
    signal gearChanged(string gear)

    MouseArea {
        anchors.fill: parent
        onClicked: gearPanel.gearChanged("D")
    }

    onGearChanged: console.log("当前档位:", gear)
}

信号与槽的连接也可用 Connections 元素完成，适合跨对象监听。C++ 后端通过 Q_PROPERTY 和 signals 暴露给 QML，实现“后端数据变化 → QML 自动刷新”的闭环。

四、JavaScript 集成：逻辑与数据加工

QML 内嵌 JavaScript 引擎，可在属性绑定、函数体和信号处理中直接编写 JS。常见用法包括：字符串格式化、数组遍历、条件判断、调用 C++ 暴露的方法。对于复杂逻辑，建议抽到独立的 .js 文件，通过 import "utils.js" as Utils 引入，保持 QML 文件简洁。

// utils.js
function formatSpeed(v) {
    return v.toFixed(0) + " km/h"
}

// main.qml
import "utils.js" as Utils
Text { text: Utils.formatSpeed(88.6) }

五、开发环境搭建与验证

推荐使用 Qt 6.x + Qt Creator。安装时勾选 Qt Quick Controls、Qt Quick Designer 和对应编译器套件。创建项目选择 “Qt Quick Application”，构建系统可选 CMake 或 qmake。运行后应看到空白窗口，再逐步加入 QML 元素。

六、案例与复盘：车速卡片

场景：中控屏显示车速卡片，速度来自 C++ 后端，超过 120 km/h 时文字变红。实现路径：C++ 暴露 speed 属性与 speedChanged 信号；QML 用 Text 绑定 speed，并用条件表达式控制颜色。复盘常见误区：一是把 id 当成变量在 JS 中随意修改，破坏绑定；二是信号名拼写错误导致 onClicked 不触发；三是忘记 import 导致类型找不到。排查时优先看控制台输出，再检查属性绑定是否被命令式赋值覆盖。

掌握以上五块内容后，即可进入 Qt Quick Controls 与自定义组件的实战阶段。建议先在本地跑通一个包含 Text、Rectangle、MouseArea 和自定义信号的 QML 文件，再接入 C++ 数据源，形成完整的最小闭环。