QT / QML COURSE PROJECT

鹿人 · 车载 HMI 创作成果

基于 QML 界面 + C++ 数据层 的 7 寸车载人机界面完整实现。从 Pixso 设计稿 1:1 还原到 Qt 真机运行,包含 4 个主页面、9 类交互动画与完整数据联动 —— 车速模拟、电量能耗、媒体播放、导航模拟,全部真实可交互。

Qt 6.11.1 / QML C++17 数据层 CMake + MinGW 1024×600 · 7 寸车机屏 信号槽 / 属性绑定 --fullscreen 部署就绪
01

四大主页面

固定 1024×600 车载布局:顶部状态栏(实时时钟 / 蓝牙 / 网络 / 电量)+ 页面区 + 底部导航。所有页面数据来自 C++ 数据层 Backend,界面通过属性绑定自动刷新,无一处轮询。

主仪表盘
01 主仪表盘DashboardPage.qml

Canvas 手绘速度表(0-160 刻度 + 发光进度弧)、电池 / 空调 / 行程卡片、正在播放迷你卡、告警卡。车速与电量由 QTimer 每秒驱动,驾驶模式实时影响车速上限与能耗。

媒体中心
02 媒体中心MediaPage.qml

专辑封面 + 播放器 + 6 首播放队列,支持蓝牙 / 收音机 / USB 三音源切换,进度条与播放状态实时联动 C++ 数据层。

车辆状态
03 车辆状态VehiclePage.qml

俯视车身 + 四轮胎压卡(右后低压橙色告警)、驾驶模式、灯光控制、空调设定、电池概览 —— 全部可交互,并带车身本体动画反馈。

设置
04 设置SettingsPage.qml

显示 / 连接 / 声音 / 系统设置与恢复出厂流程,含自绘开关组件、音量条与二次确认交互。

02

交互动画详解

以下每组均为真机运行的关键帧实录(自动化点击 + 连拍抓取)。点击左右箭头或圆点逐帧查看,开启「自动」可循环播放。

动画滑动分段选择器

驾驶模式 / 灯光控制采用自绘 SegmentedPill 组件:单个青色药丸以 Easing.OutBack 回弹缓动滑向选中项(280ms),文字颜色 ColorAnimation 渐变过渡,按下时整组缩放 94%,下方描述文字淡出换内容后淡入。第 2 帧可见药丸已到位、描述正处于半透明过渡中。

动画车灯动画 — 灯光控制联动车身

切换灯光时俯视车身真实亮灯:近光 = 车头两束青色渐变光锥(Canvas 渐变绘制,1.1s 呼吸闪烁,350ms 淡入);示宽灯 = 四角琥珀色示宽灯呼吸点亮;自动 = 灯光熄灭。淡入淡出由外层 opacity Behavior 完成。

动画驾驶模式 — 整车主题变色 + 能量流

驾驶模式切换时整车换主题:车身描边与车尾三条能量流线颜色渐变(经济 = 绿 #34D399 / 标准 = 青 / 运动 = 橙 #FF8A3D),能量流速度随模式改变(运动最快);右上角模式角标「经 / 标 / 运」弹性缩放弹出。同时 C++ 层切换车速上限与能耗速率 —— 运动模式掉电明显更快。

动画空调温度 — 车身飘字反馈

点击 +/− 调温时,车身上浮出「+0.5°C / −0.5°C」飘字并向上漂移淡出(仿手游伤害数字),± 按钮带按压缩放反馈;温度、续航数据实时联动。

联动媒体中心 — 三音源切换 / 播放状态

音源芯片真实切换:收音机模式下界面变为电台列表(FM 频率 + 呼吸「直播中」标识),标题 / 副标题由 C++ 按音源自动切换,上一首 / 下一首自动变为换台;播放 / 暂停时中间按钮在播放三角与暂停双条之间切换。

动画导航模拟 — 充电站列表 + 行驶小车

「附近充电站」打开 3 站列表(距离 / 价格 / 空闲桩),点「去导航」进入路线模式:Canvas 示意地图上,白色小车沿青色路线实时移动,剩余距离与预计用时每 250ms 递减,到达后切换「已到达」完成态。对比第 2、3 帧可见小车已沿路线前进。

功能连接管理 — 蓝牙扫描 / Wi-Fi 切换

设置页「管理」打开连接管理浮层:蓝牙支持断开 / 连接、扫描新设备(1.6 秒模拟扫描出 3 台设备可配对);Wi-Fi 列表带三格信号指示,点击任意网络模拟 1.2 秒握手后真实切换高亮与标题。

流程系统流程 — 检查更新 / 恢复出厂

「检查更新」点击后走进度条状态机,完成后显示「✓ 已是最新版本」;「恢复出厂设置」需二次确认,确认后全屏进度浮层并真实调用 C++ factoryReset() 重置全部数据(音量、空调、驾驶模式、音源等),完成后一键返回。

03

技术架构

行业标准「QML 界面 + C++ 数据层」分离架构,也是本项目作为 C++ 入门练习的核心学习路径。

C++ 数据层 · Backend

Q_PROPERTY 把车速 / 电量 / 胎压 / 媒体等暴露给 QML;NOTIFY 信号驱动界面自动刷新;Q_INVOKABLE 供 QML 调用(切歌、模式切换、恢复出厂等);QTimer 每秒模拟行驶数据:车速波动、播放进度、电量能耗(随驾驶模式 0.002~0.009%/s)。

QML 界面层 · 四页面

StackLayout 页面容器 + 底部导航(Canvas 手绘图标);Canvas 实现速度表、导航示意地图、车灯光锥;自绘 SegmentedPill 滑动选择器与 TriIcon 方向图标组件。

动画体系

Behavior on x + Easing.OutBack 药丸回弹滑动;ColorAnimation 主题渐变;SequentialAnimation 飘字与淡入淡出;NumberAnimation on beamOp 呼吸循环且 running 绑定业务状态。

部署就绪 · 7 寸屏

固定 1024×600 匹配 7 寸车机屏标准分辨率;--fullscreen 参数一键全屏;无平台专有 API,CMake 跨平台。板端运行:QT_QPA_PLATFORM=eglfs/linuxfb + 安装中文字体(Noto CJK)+ 触屏 evdev 自动识别。