第二章：开发环境搭建——Qt for MCU、Kanzi Studio、Android Studio for Automotive、Web HMI（React/Vue）环境配置

好，咱们直接进入正题。

做车载HMI开发，第一关就是搭环境。说实话，这步最磨人。我见过太多新手，代码写得好好的，结果卡在环境配置上，一卡就是两三天。我自己早期做项目时，也曾在Qt for MCU的交叉编译链上折腾了整整一个周末。

所以这一章，我把四个主流开发环境的搭建要点，一次性给你讲透。你跟着走，基本不会踩坑。

2.1 Qt for MCU：嵌入式HMI的硬骨头

Qt for MCU，说白了就是让Qt跑在微控制器上。它跟桌面版Qt完全是两码事。桌面版你装个Qt Creator，点几下鼠标就能跑。但MCU版？你得跟交叉编译链、板级支持包、内存限制这些东西打交道。

2.1.1 核心组件清单

你需要准备这些东西：

• Qt for MCU SDK：官方提供，包含运行时库和工具链
• 交叉编译器：比如 ARM GCC 或 IAR
• 板级支持包（BSP）：芯片厂商提供，包含驱动和启动代码
• CMake：构建系统，Qt for MCU 依赖它
• Python 3.6+：用于一些脚本工具

2.1.2 安装步骤（以STM32H7为例）

我习惯按这个顺序来：

1. 安装 ARM GCC 工具链，版本推荐 10.3-2021.10 或更新
2. 下载 Qt for MCU SDK 2.5 以上版本，解压到无中文路径的目录
3. 设置环境变量 QUL_HOME 指向 SDK 根目录
4. 安装 CMake，确保能在命令行里直接调用
5. 运行 SDK 自带的 qulconfig 工具，选择你的目标板

# 设置环境变量（Linux/macOS）
export QUL_HOME=/opt/QtForMCU-2.5.0
export PATH=$QUL_HOME/bin:$PATH

# 配置项目
cmake -S . -B build -DCMAKE_TOOLCHAIN_FILE=$QUL_HOME/lib/cmake/Qul/toolchain/armgcc.cmake

# 编译
cmake --build build

2.2 Kanzi Studio：UI设计师的利器

Kanzi Studio 跟 Qt 的思路不太一样。它更偏向于「设计驱动开发」。设计师在 Studio 里画界面，开发者在代码里调逻辑。嗯，这个分工很明确。

2.2.1 环境要求

2.2.2 安装要点

安装 Kanzi Studio 本身很简单，下一步下一步就行。但有几个坑你得注意：

• 路径不能有空格：比如 C:\Program Files\Kanzi 这种，编译时容易出问题。我习惯装在 C:\Kanzi 或 D:\Kanzi
• VS 版本要匹配：Kanzi 3.9 对 VS 2019 支持最好，4.0 开始才全面支持 VS 2022
• 许可证激活：Kanzi 需要联网激活。如果在内网开发，记得提前申请离线许可证

2.3 Android Studio for Automotive：车机系统的标配

现在很多车机都用 Android Automotive OS。说白了，就是 Google 专门为汽车定制的 Android 系统。开发环境跟普通 Android 开发差不多，但有几个特殊配置。

2.3.1 安装步骤

1. 下载 Android Studio Hedgehog 或更高版本
2. 安装时勾选「Android Virtual Device」和「Android SDK」
3. 在 SDK Manager 里安装 Android 12（API 31）或更高版本
4. 安装 Automotive 模拟器系统镜像（这个很重要）

# 创建 Automotive 模拟器
avdmanager create avd -n automotive_avd -k "system-images;android-31;google_apis;x86_64" -d "automotive_1024p_landscape"

# 启动模拟器
emulator -avd automotive_avd -gpu host -memory 2048

2.3.2 特殊配置项

做车载开发，有几个地方跟手机开发不一样：

• 系统 UI 权限：你的 HMI 应用需要 SYSTEM_ALERT_WINDOW 和 BIND_ACCESSIBILITY_SERVICE 权限
• 多屏支持：车机通常有仪表屏和中控屏，需要在 AndroidManifest.xml 里声明 android:screenOrientation
• 硬件加速：必须开启，否则动画会卡顿。在 AndroidManifest.xml 里加 android:hardwareAccelerated="true"

2.4 Web HMI（React/Vue）：轻量级方案

Web HMI 这两年越来越火。为啥？因为开发快、迭代快、跨平台。你写一套代码，中控屏、仪表屏、后排娱乐屏都能跑。但缺点也很明显——性能不如原生。

2.4.1 React 环境配置

我个人更倾向用 React，生态成熟，社区活跃。配置步骤很简单：

# 安装 Node.js 18 LTS
# 然后创建项目
npx create-react-app my-hmi-app --template typescript

# 安装常用依赖
npm install styled-components react-router-dom
npm install @types/styled-components --save-dev

2.4.2 Vue 环境配置

如果你团队里设计师多，Vue 可能更合适。它的模板语法更直观：

# 创建 Vue 3 项目
npm create vue@latest my-hmi-app
# 选择 TypeScript、Router、Pinia

# 安装 UI 组件库（车载场景推荐）
npm install vant@4

2.4.3 车载适配要点

Web HMI 跑在车机上，有几个硬性要求：

• 触摸事件优化：车机触摸屏的采样率通常只有 60Hz，需要做防抖和节流
• 内存控制：车机浏览器内存有限，建议用 React.memo 或 Vue.memo 减少重渲染
• 动画性能：尽量用 CSS 动画，少用 JS 动画。CSS 动画由 GPU 加速，更流畅

2.5 环境验证：确保一切就绪

环境搭好了，怎么知道对不对？我一般跑一个最简单的「Hello World」来验证：

嗯，到这步，你的开发环境就算搭好了。别急，这只是开始。下一章，我们会真正动手写第一个 HMI 界面。到时候你会发现，环境配置那点苦，其实挺值得的。

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