4. QML 基础语法：类型系统、属性绑定、信号与槽、JavaScript 集成

好，咱们进入 QML 的核心语法部分。说实话，很多从 Widget 转过来的同事，一开始看 QML 会觉得「这玩意儿能写车机？」。但只要你搞懂了它的类型系统、属性绑定和信号机制，就会发现——这玩意儿天生就是为多屏互动设计的。

我个人习惯把 QML 的语法体系拆成四个模块来学。咱们一个一个过。

4.1 QML 类型系统：不只是「万物皆对象」

QML 的类型系统，说白了就是一套轻量级的对象声明语言。但它跟 C++ 的类体系不太一样——它更灵活，也更「松散」。

类型类别	说明	我常用的场景
基本类型	int、real、string、bool、color、font	属性定义、状态控制
QML 对象类型	Rectangle、Text、Image、MouseArea	UI 元素构建
Qt Quick 类型	Item、ListView、GridView、Flickable	容器、列表、滚动
自定义类型	通过 .qml 文件或 C++ 注册	复用组件、封装业务逻辑

这里有个坑，我刚开始做座舱项目时踩过——QML 的类型是动态的。你定义一个 property int speed，它确实是 int，但如果你在 JavaScript 里给它赋一个字符串，它不会报编译错误，只会在运行时给你个警告。嗯，所以我的建议是：所有跨模块传递的属性，一定要在定义时就明确类型。

4.2 属性绑定：QML 最强大的「自动同步」机制

属性绑定是 QML 的灵魂。你想想看，在传统 Widget 里，你要写一堆 connect 和 update 才能让两个 UI 元素联动。但在 QML 里，一句话就搞定。

// 一个简单的属性绑定示例
Rectangle {
    width: parent.width * 0.5  // 宽度永远等于父容器宽度的一半
    height: 100
    color: mouseArea.pressed ? "#3498db" : "#2c3e50"  // 按下时变色

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
}

看到没？width: parent.width * 0.5 这个表达式不是「赋值一次」，而是建立了一个绑定关系。只要 parent.width 变了，width 会自动重新计算。我在做多屏互动时，经常用这个特性来做「主屏控制副屏尺寸」——主屏发一个比例值，副屏的宽度自动跟着变，完全不用写同步代码。

4.3 信号与槽：跨组件通信的「高速公路」

信号与槽是 Qt 的看家本领。在 QML 里，它被简化成了 signal 和 onXxx 的写法。我个人觉得，这是 QML 里最「优雅」的部分。

// 自定义信号
Item {
    signal speedChanged(int newSpeed)

    function updateSpeed(value) {
        speedChanged(value)  // 发射信号
    }
}

// 在其他组件中连接
Item {
    id: speedSource
    onSpeedChanged: {
        console.log("速度变了:", newSpeed)
        gauge.value = newSpeed  // 更新仪表盘
    }
}

这里有个关键点：QML 的信号连接是隐式的。你只要定义一个 onXxx 处理器，QML 引擎会自动把它连接到对应的信号上。不需要写 connect，不需要管理生命周期。我曾经在做一个三屏联动的项目时，用信号把中控屏的导航指令、仪表盘的时速、副驾屏的娱乐状态串起来——整个通信层只用了不到 50 行代码。

4.4 JavaScript 集成：QML 的「万能胶水」

QML 本身不是一门「完整」的编程语言——它没有循环、没有复杂的逻辑控制。所以，JavaScript 就是它的补充。你可以在 QML 里直接写 JS 函数，也可以引入外部的 .js 文件。

// 在 QML 中直接使用 JavaScript
Item {
    function calculateFuelConsumption(speed, time) {
        // 这里可以写任意 JS 逻辑
        var distance = speed * time / 3600
        return distance * 0.08  // 假设每公里耗油 0.08L
    }

    Text {
        text: "油耗: " + parent.calculateFuelConsumption(80, 1800) + "L"
    }
}

但要注意——QML 里的 JS 不是浏览器里的 JS。它没有 DOM API，没有 window 对象，也没有 setTimeout（虽然 Qt 提供了 Timer 组件替代）。我见过有人把 Web 前端的习惯带进来，在 QML 里写 document.getElementById——嗯，那肯定跑不通。

JS 特性	QML 中是否支持	替代方案
变量、函数、对象	✅ 完全支持	—
数组、JSON	✅ 完全支持	—
DOM 操作	❌ 不支持	用 QML 属性绑定替代
setTimeout/setInterval	❌ 不支持	用 Timer 组件
XMLHttpRequest	❌ 不支持	用 XMLHttpRequest（Qt 网络模块）
Promise/async/await	⚠️ 部分支持（Qt 6.5+）	用信号回调

4.5 知识体系总览

下面这张图，是我自己总结的 QML 基础语法知识结构。你可以把它当作学习路线图，也可以当作面试前的复习提纲。

这张图把 QML 基础语法分成了四个象限。你仔细看，每个象限下面还有四个子节点——这些就是你在实际项目中每天都会打交道的东西。我个人建议，先把「属性绑定」和「信号与槽」吃透，因为多屏互动的核心就是「数据变化自动同步」和「跨屏事件通知」。类型系统和 JS 集成，可以在做具体功能时再深入。