第4章：Qt Quick 与 QML 基础

说实话，很多刚接触Qt车载开发的朋友，一上来就被QML的语法给整懵了。我当年也是，看着那堆花括号和冒号，心里直犯嘀咕：这玩意儿跟C++长得也太不像了吧？但干了两三个项目之后，我彻底爱上了这种声明式的写法——尤其是在做车载HMI的时候，效率提升不是一星半点。

这一章，咱们就把QML的底裤扒干净。从语法入门到属性绑定，从信号槽到Controls 2组件库，一步到位。

4.1 QML语法入门：别被花括号吓到

QML的语法其实特别简单。说白了，就是“对象 + 属性 + 子对象”的结构。你看下面这个例子：

import QtQuick 2.15

Rectangle {
    width: 200
    height: 100
    color: "lightblue"

    Text {
        text: "Hello, 车载世界!"
        anchors.centerIn: parent
    }
}

看到没？Rectangle是一个对象，它里面有width、height、color这些属性。然后它里面又嵌套了一个Text子对象。这就是QML的基本骨架。

我个人习惯把QML文件按模块拆分。比如一个仪表盘，我会拆成SpeedGauge.qml、FuelIndicator.qml，而不是把所有东西塞到一个文件里。你想想看，一个文件上千行，后期维护起来多痛苦。

4.2 属性绑定：Qt Quick的灵魂

属性绑定是QML最强大的特性之一。它让UI元素之间自动保持同步，你不需要写任何更新代码。

Rectangle {
    width: parent.width * 0.5
    height: parent.height * 0.3
    color: slider.value > 50 ? "green" : "red"

    Slider {
        id: slider
        from: 0
        to: 100
        value: 50
    }
}

这里width绑定了parent.width * 0.5，父容器一变宽，这个矩形自动跟着变。而color绑定了slider.value的条件判断——滑块一拖动，颜色就变了。

我在项目中遇到过一个问题：有人把属性绑定写成了单向赋值。比如width: 100，这没问题。但如果你写width = parent.width * 0.5（注意是等号不是冒号），那就变成了一次性赋值，不会自动更新了。嗯，这里要注意，绑定用冒号，赋值用等号，千万别搞混。

4.3 信号与槽机制：让组件“活”起来

QML里的信号与槽，比C++版本要简洁得多。你不需要声明、不需要连接，直接在组件里写onXxx就行了。

Button {
    text: "点击我"
    onClicked: {
        console.log("按钮被点击了")
        statusText.text = "已点击"
    }
}

Text {
    id: statusText
    text: "等待点击"
}

看到onClicked了吗？这就是槽函数。当按钮被点击时，Qt会自动调用这个函数。你不需要像C++那样写connect()，省事多了。

自定义信号也很简单：

// MyComponent.qml
Rectangle {
    signal speedChanged(int newSpeed)

    MouseArea {
        onClicked: {
            parent.speedChanged(80)
        }
    }
}

// 使用处
MyComponent {
    onSpeedChanged: {
        console.log("速度变为:", newSpeed)
    }
}

为什么QML要这么设计？因为车载HMI里，各种状态变化太频繁了。车速、转速、油量、温度……每个变化都要触发UI更新。用信号与槽机制，代码清晰又高效。

4.4 Qt Quick Controls 2：开箱即用的组件库

Controls 2是Qt官方提供的一套现代化UI组件。按钮、滑块、进度条、开关……应有尽有。而且它们都遵循Material Design风格，看起来就很专业。

组件名	用途	常用属性
Button	按钮，触发操作	text, onClicked, enabled
Slider	滑块，调节数值	from, to, value, onValueChanged
Switch	开关，切换状态	checked, onCheckedChanged
ProgressBar	进度条，显示进度	from, to, value, indeterminate
TextField	文本输入框	text, placeholderText, onAccepted

来看一个实际的车载界面片段：

import QtQuick.Controls 2.15

Column {
    spacing: 20
    anchors.centerIn: parent

    Label {
        text: "空调温度调节"
        font.pixelSize: 24
    }

    Row {
        spacing: 10
        Button {
            text: "降温"
            onClicked: tempSlider.value -= 1
        }
        Slider {
            id: tempSlider
            from: 16
            to: 30
            value: 24
            stepSize: 1
        }
        Button {
            text: "升温"
            onClicked: tempSlider.value += 1
        }
    }

    Label {
        text: "当前温度: " + tempSlider.value + "°C"
        font.pixelSize: 18
    }
}

这段代码实现了一个简单的空调温度调节面板。滑块控制温度，按钮微调，标签实时显示。你想想看，如果用传统C++写这个界面，得多少行？QML十几行就搞定了。

知识体系总览

下面这张图，把本章的核心知识点串起来了。你可以把它当作一个思维导图来用。

这张图把四个知识点串在了一起。语法是基础，绑定是灵魂，信号与槽是沟通方式，Controls 2是武器库。四者缺一不可。

本章小结

QML其实没那么神秘。它就是用一种更直观的方式描述UI。你告诉Qt“我要一个蓝色的矩形，里面放一行文字”，Qt就帮你画出来了。属性绑定让UI自动响应变化，信号与槽让组件之间可以“对话”，Controls 2则提供了现成的轮子——你不用从零开始造。

我在车载项目里最深的体会是：QML的学习曲线其实很平缓。你花一天时间熟悉语法，两天时间做个小demo，一周就能上手做实际界面了。但要注意，QML虽然简单，但性能优化是个深坑——这个我们后面会专门讲。

---

公众号:蓝海资料掘金营，微信deep3321