Qt GUI 程序开发完全学习笔记（从环境搭建到第一个界面程序

@[TOC] Qt GUI 程序开发完全学习笔记（从环境搭建到第一个界面程序）

🎉写给急着做产品的你：本章教你如何在Ubuntu 中搭建 Qt 开发环境，为 ARM 开发板编译带 Qt 的系统，然后使用 Qt Creator 编写图形界面程序，最终在开发板上显示窗口、响应按钮点击。全程配有白话解释、生活化类比、每一步的操作截图说明（你只需要把对应的图片放上去）。跟着做，你就能在 1 小时内跑起第一个嵌入式 Qt 应用。

---

1. 概述 —— 为什么要用 Qt 做界面？

1.1 一句话白话解释

Qt 是一套跨平台的 C++ 图形界面库。你可以用它在 Windows 上写代码、设计界面，然后交叉编译成 ARM 版本，放到开发板上运行。就像用同一种乐高积木，既能搭出电脑上的窗口，也能搭出开发板上的屏幕。

1.2 生活化类比 🧱

• Qt Creator= 装修设计软件（画图纸）
• Qt 库= 建材超市（提供各种控件：按钮、标签、文本框）
• 交叉编译工具链= 翻译官（把 x86 图纸翻译成 ARM 能看懂的语言）
• 开发板= 毛坯房（最终展示装修效果的地方）

1.3 整体流程概览

text

┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Ubuntu 中 │ ──→ │ 交叉编译 │ ──→ │ 开发板运行 │ │ 写 Qt 代码 │ │ 生成 ARM │ │ 显示界面 │ │ 设计界面 │ │ 可执行文件 │ │ 响应触摸 │ └─────────────┘ └─────────────┘ └─────────────┘ ↑ ↑ ↑ Qt Creator arm-buildroot- ADB 传输 + 控件拖拽 linux-gnueabihf-g++ + 设置环境变量

---

2. Ubuntu 环境准备 —— 设置交叉编译工具链

2.1 一句话白话

交叉编译工具链是一套专门生成 ARM 指令的程序。你需要在终端里告诉系统：“我要用这套工具来编译代码”。

2.2 设置命令（以 IMX6ULL Pro 为例）

打开 Ubuntu 终端，执行以下命令（可以写到~/.bashrc永久生效）：

bash

export ARCH=arm export CROSS_COMPILE=arm-buildroot-linux-gnueabihf- export PATH=$PATH:/home/book/100ask_imx6ull-sdk/ToolChain/arm-buildroot-linux-gnueabihf_sdk-buildroot/bin

💡验证是否成功：输入arm-buildroot-linux-gnueabihf-gcc --version，如果显示版本信息，说明工具链可用。

2.3 常见错误

错误	原因	解决
command not found	路径设置错误	检查 PATH 是否包含了 bin 目录
No such file	工具链未下载	确保网盘中的ToolChain已解压到正确位置

---

3. 编译支持 Qt 的系统 —— Buildroot 一键构建

3.1 一句话白话

Buildroot 是一个自动构建工具，它可以帮你编译出完整的内核、设备树、根文件系统（带 Qt 库）。你只需要执行几条命令，等它跑完即可。

3.2 具体步骤

3.2.1 更新 repo（仓库同步）

因为很多软件包在国内下载慢，百问网已经镜像到了国内服务器，需要先更新一下仓库：

bash

cd /home/book/100ask_imx6ull-sdk ../repo/repo sync -j4

-j4表示用 4 个线程并行下载，加快速度。

3.2.2 进入 Buildroot 目录并清理

bash

cd /home/book/100ask_imx6ull-sdk/Buildroot_2020.02.x make clean # 清除之前的编译产物（第一次可以不用）

3.2.3 配置为 100ask_imx6ull_pro 开发板（带 Qt）

bash

make 100ask_imx6ull_pro_ddr512m_systemV_qt5_defconfig

这个命令会生成一个.config文件，告诉 Buildroot 要编译哪些组件（Linux 内核、Qt5、各种驱动等）。

3.2.4 开始编译（耗时较长，约 1~2 小时）

bash

make all -j4

-j4表示用 4 个 CPU 核心并行编译，可以加快速度。如果你的电脑核心更多，可以用-j8。

3.3 编译输出文件

编译成功后，所有生成的文件都在output/images/目录下，如图（对应你的图片buildroot2020.02.x/output/images）：

文件名	说明
zImage	Linux 内核镜像
100ask_imx6ull-14x14.dtb	设备树文件
rootfs.tar.bz2	打包压缩的根文件系统（用于 NFS 启动）
100ask-imx6ull-pro-512d-systemv-v1.img	完整的系统镜像（烧写用）
u-boot-dtb.imx	U-Boot 引导程序

🎯重点：100ask-imx6ull-pro-512d-systemv-v1.img这个文件就是我们用来烧写开发板的完整系统。

---

4. 烧写系统到开发板 —— 使用烧写工具

4.1 硬件连接

1. 开发板断电
2. 不要插 TF 卡（如果插了，先拔掉）
3. 用USB OTG 线连接开发板的 OTG 口 和 电脑的 USB 口
4. 设置开发板的启动开关为USB 启动（如图USB启动）
5. 接上电源线和USB 串口线（用于查看烧写日志）

4.2 准备烧写文件

将编译出来的100ask-imx6ull-pro-512d-systemv-v1.img重命名为emmc.img（如果要烧写到 EMMC）或sdcard.img（如果要烧写到 SD/TF 卡），然后复制到烧写工具的files目录，覆盖原有文件。

烧写工具目录结构（如图100ask_imx6ull_flashing_tool）：

text

100ask_imx6ull_flashing_tool/ ├── files/ │ ├── emmc.img ← 重命名后放这里 │ ├── sdcard.img │ ├── zImage │ ├── u-boot-dtb.imx │ └── 100ask_imx6ull-14x14.dtb ├── 100ask_imx6ull_flashing_tool.exe └── ...

4.3 执行烧写

1. 双击运行100ask_imx6ull_flashing_tool.exe
2. 在界面中选择设备：EMMC（或 SD）
3. 点击“烧写整个系统”
4. 等待进度条走完，直到界面提示---Execution completed, Please set to EMMC mode and restart the board.---
5. 将开发板的启动开关拨回EMMC 启动（或 SD 卡启动），然后重新上电

⚠️注意：如果烧写过程中卡住，检查 USB OTG 线是否插紧，以及是否已经设置为 USB 启动模式。

---

5. 安装 Qt Creator —— 集成开发环境

5.1 下载安装包

• 官网下载：https://download.qt.io/archive/qt/5.12/5.12.9/
• 或使用网盘中的qt-opensource-linux-x64-5.12.9.run

5.2 安装步骤

1. 在 Ubuntu 中，双击下载好的.run文件，选择“Run”开始安装。
2. 欢迎界面 → 点击Next
3. Qt Account 登录页面
   • 正常情况应该输入账号密码，但国内网络可能无法登录。
   • 特殊技巧：随便输入一个邮箱（如[e-mail]）和密码，点击Next会失败，然后点击 Back 按钮，就会跳过登录直接进入下一步。
4. 选择安装路径（默认/home/book/Qt5.12.9）
5. 选择组件：至少勾选Qt 5.12.9和Qt Creator，其他可按需选择。
6. 等待安装完成。

5.3 启动 Qt Creator

方法一：通过桌面图标

• 点击 Ubuntu 左下角的Activities，搜索Qt Creator，点击图标启动。

方法二：通过命令行

bash

cd ~/Qt5.12.9/Tools/QtCreator/bin ./qtcreator.sh &

&表示后台运行，这样终端不会被占用。

---

6. 配置 Qt Creator 开发环境 —— 让 Qt 认识 ARM 工具链

6.1 打开选项界面（如图Options）

在 Qt Creator 菜单栏点击Tools→Options（或快捷键Ctrl+,）。

6.2 设置编译器（Compiler）（如图Choose Executable、C++选、C语言选）

1. 在左侧选择Kits→ 右侧标签页选择Compilers
2. 点击Add→ 选择Custom→C++（添加 C++ 编译器）
3. 在弹出的对话框中：

• Compiler path浏览选择：/home/book/100ask_imx6ull-sdk/ToolChain/arm-buildroot-linux-gnueabihf_sdk-buildroot/bin/arm-buildroot-linux-gnueabihf-g++
  • Make path填写：/usr/bin/make
  • ABI依次选择：arm→linux→generic→elf→32bit

4. 点击Apply保存。
5. 同样方法添加C 编译器，路径选择arm-buildroot-linux-gnueabihf-gcc。

6.3 设置调试器（Debugger）（如图NewDebugger）

1. 在Kits→Debuggers标签页，点击Add
2. Name填写：NewDebugger
3. Path浏览选择：/home/book/100ask_imx6ull-sdk/ToolChain/arm-buildroot-linux-gnueabihf_sdk-buildroot/bin/arm-buildroot-linux-gnueabihf-gdb
4. Type选择GDB，ABI选择arm-linux-generic-elf-32bit
5. 点击Apply。

6.4 添加 Qt 版本（Qt Versions）（如图find -name qmake、qmake路径）

1. 在Kits→Qt Versions标签页，点击Add…

2. 浏览找到qmake文件。它的位置可以通过命令查找：
   

   bash

   cd /home/book/100ask_imx6ull-sdk find -name qmake

   通常路径类似：./Buildroot_2020.02.x/output/host/bin/qmake
   

3. 选择该qmake文件，点击Open。

4. 此时会显示Qt 5.12.8 (host)，点击Apply。

6.5 配置 Kit（套件）

Kit 是把编译器、调试器、Qt 版本、sysroot等打包在一起的一个配置。

1. 在Kits标签页，点击Add

2. 设置如下：

   • Name：100ask（或任意名字）

   • Device type：Desktop（因为我们是交叉编译，运行在开发板，但开发机是 PC）

   • Sysroot：填写交叉编译工具链的 sysroot 目录

     text

     /home/book/100ask_imx6ull-sdk/ToolChain/arm-buildroot-linux-gnueabihf_sdk-buildroot/arm-buildroot-linux-gnueabihf/sysroot/

   • Compiler（C++）：选择刚才添加的Custom（C++ 编译器）

   • Compiler（C）：选择Custom（C 编译器）

   • Debugger：选择NewDebugger

   • Qt version：选择Qt 5.12.8 (host)

3. 点击Apply→OK保存。

✅ 至此，Qt Creator 已经完全配置好，可以开始写 ARM 版 Qt 程序了。

---

7. 编写第一个 Qt 程序 —— LED_and_TempHumi

7.1 创建新项目（如图New File or Project、Project Location）

1. 菜单栏点击File→New File or Project
2. 选择Application→Qt Widgets Application→ 点击Choose…
3. 设置：
   • Name：LED_and_TempHumi
   • Create in：/home/book/LED_and_TempHumi（可以点 Browse 创建目录）
   • 勾选Use as default project location（可选）
4. 点击Next

7.2 选择构建系统（如图Define Build System）

• Build system：选择qmake（Qt 自带的构建工具）
• 点击Next

7.3 选择基类（如图Class Information）

• Class name：MainWindow（默认）
• Base class：QMainWindow（带菜单栏、状态栏的主窗口）
• Generate form：勾选（会生成mainwindow.ui界面文件）
• 点击Next

7.4 选择翻译文件（如图Translation File）

• 如果不需要多语言，保持Language为<none>，直接点击Next

7.5 选择 Kits（如图Kits）

• 勾选我们刚才配置的100ask套件（不要选 Desktop，除非你想在 Ubuntu 本地运行）
• 点击Next

7.6 完成创建（如图Project Management）

• 确认项目文件列表，点击Finish

此时 Qt Creator 会自动生成以下文件：

• LED_and_TempHumi.pro：项目配置文件
• main.cpp：主函数入口
• mainwindow.h/mainwindow.cpp：主窗口类的头文件和实现
• mainwindow.ui：界面设计文件（XML 格式）

---

8. 编译 Qt 程序 —— 从界面设计到生成 ARM 可执行文件

8.1 设计界面（如图mainwindow.ui、拖拽控件）

1. 在左侧项目树中，双击Forms→mainwindow.ui，进入Design模式。
2. 从左侧控件栏（如图Display Widgets）中：
   • 拖拽一个Label（标签）到窗口中央，双击修改文字为温度：25°C
   • 拖拽另一个Label，修改文字为湿度：60%
   • 拖拽一个Push Button，修改文字为点亮 LED
   • 再拖拽一个Push Button，修改文字为关闭 LED
3. 调整控件位置和大小（可以自由拖动）。
4. 保存（Ctrl+S）。

8.2 添加按钮点击响应代码（如图on_pushButton_clicked）

双击“点亮 LED”按钮，Qt Creator 会自动跳转到mainwindow.cpp并生成一个槽函数框架：

cpp

void MainWindow::on_pushButton_clicked() { // 在这里添加按钮点击时的处理代码 qDebug() << "LED clicked"; // 在控制台打印信息 }

qDebug()是 Qt 提供的调试输出，会打印到开发板的串口终端。

同样方法，为“关闭 LED”按钮添加槽函数。

8.3 构建（编译）项目（如图Build All Projects）

• 点击菜单栏Build→Build Project “LED_and_TempHumi”（或按快捷键Ctrl+B）
• 下方Compile Output窗口会显示编译过程，最后出现类似:-1: error: ...表示有错误，否则成功。

8.4 查看编译结果（如图file LED_and_TempHumi）

编译成功后，会在项目构建目录生成可执行文件，路径类似：

text

/home/book/LED_and_TempHumi/build-LED_and_TempHumi-100ask-Debug/LED_and_TempHumi

在终端中进入该目录，执行file命令确认是 ARM 架构：

bash

cd /home/book/LED_and_TempHumi/build-LED_and_TempHumi-100ask-Debug file LED_and_TempHumi

输出应包含：

text

ELF 32-bit LSB executable, ARM, EABI5 version 1 (SYSV), dynamically linked, ...

---

9. 在开发板上运行 Qt 程序

9.1 手工运行（首次测试）

步骤 1：通过 ADB 上传可执行文件（如图adb push LED_and_TempHumi /root）

bash

adb push LED_and_TempHumi /root

步骤 2：关闭开发板原有的 GUI（避免冲突）

开发板出厂可能自带了 LVGL 或 HMI 界面，需要先关掉：

bash

adb shell mv /etc/init.d/*lvgl* /root # 移动 lvgl 启动脚本 mv /etc/init.d/*hmi* /root # 移动 hmi 启动脚本 reboot # 重启

步骤 3：重启后再次 ADB 登录，设置环境变量并运行

bash

adb shell # 禁止 LCD 黑屏（屏幕保护） echo -e "\033[9;0]" > /dev/tty0 # 设置 Qt 运行环境 export QT_QPA_GENERIC_PLUGINS=tslib:/dev/input/event1 # 触摸屏驱动 export QT_QPA_PLATFORM=linuxfb:fb=/dev/fb0 # 帧缓冲设备 export QT_QPA_FONTDIR=/usr/lib/fonts/ # 字体目录 # 运行程序 /root/LED_and_TempHumi

此时开发板屏幕上会显示你设计的窗口，点击按钮会在串口终端打印LED clicked。

环境变量解释（表格）

变量	含义	常用值
QT_QPA_PLATFORM	指定 Qt 的平台插件	linuxfb（使用 Linux 帧缓冲）
QT_QPA_GENERIC_PLUGINS	指定输入设备插件	tslib（触摸屏）
QT_QPA_FONTDIR	字体文件目录	/usr/lib/fonts/

9.2 自动运行（开机自启动）

创建一个启动脚本/etc/init.d/S99myqt，内容如下：

bash

#!/bin/sh start() { echo -e "\033[9;0]" > /dev/tty0 export QT_QPA_GENERIC_PLUGINS=tslib:/dev/input/event1 export QT_QPA_PLATFORM=linuxfb:fb=/dev/fb0 export QT_QPA_FONTDIR=/usr/lib/fonts/ # 关闭开机启动画面（psplash） psplash-write "PROGRESS 95" psplash-write "QUIT" # 启动 Qt 程序 /root/LED_and_TempHumi & } stop() { killall LED_and_TempHumi } case "$1" in start) start ;; stop) stop ;; *) echo "Usage: $0 {start|stop|restart}" exit 1 esac exit $?

设置可执行权限并添加到启动项：

bash

chmod +x /etc/init.d/S99myqt update-rc.d S99myqt defaults # 如果有 update-rc.d 命令

重启后，Qt 程序就会自动运行。

---

10. 完整速查表 📋

10.1 常用命令速查

操作	命令
设置工具链	export PATH=...
编译 Buildroot	make 100ask_imx6ull_pro_ddr512m_systemV_qt5_defconfig && make all -j4
启动 Qt Creator	~/Qt5.12.9/Tools/QtCreator/bin/qtcreator.sh &
ADB 上传文件	adb push 本地文件 /root
ADB 登录开发板	adb shell
查看可执行文件架构	file 文件名
关闭开发板原有 GUI	mv /etc/init.d/*lvgl* /root

10.2 环境变量速查

变量	值	作用
QT_QPA_PLATFORM	linuxfb:fb=/dev/fb0	使用帧缓冲显示
QT_QPA_GENERIC_PLUGINS	tslib:/dev/input/event1	支持触摸屏
QT_QPA_FONTDIR	/usr/lib/fonts/	字体路径

---

11. 常见错误及解决

错误现象	可能原因	解决方法
Qt Creator 中找不到arm-buildroot-...-g++	工具链路径未添加到 PATH	在终端中 export 后再启动 Qt Creator（或写进.bashrc）
编译时提示Qt version is not properly installed	Qt 版本未正确添加	检查 Kits 中 Qt version 是否选择了正确的 qmake
程序在开发板上运行报cannot open libQt5Core.so.5	开发板缺少 Qt 库	烧写带 Qt 的系统（确保 Buildroot 编译了 Qt）
触摸无反应	触摸设备节点不对	用cat /dev/input/event1测试，或更换 event0/event2
屏幕黑屏	屏幕保护触发了	执行echo -e "\033[9;0]" > /dev/tty0禁止黑屏
ADB push 失败device not found	OTG 线未连接到虚拟机	在 VMware 可移动设备中连接Linux Foundation 100ASK_IMX6ULL

---

12. 扩展学习建议 🚀

12.1 进阶阅读

• Qt 官方文档：https://doc.qt.io/qt-5/
• Qt 信号与槽机制：深入理解connect用法
• Qt 样式表 (QSS)：美化界面

12.2 动手实验

1. 添加更多控件：如进度条、滑动条，并绑定实际硬件（LED 亮度调节）
2. 读取温湿度传感器：在 Qt 中调用 I2C 驱动，实时显示数值
3. 使用 QML：体验更现代的声明式界面开发
4. 网络编程：用QTcpSocket实现远程控制

12.3 常见面试题

问题	答案要点
Qt 信号槽有几种连接方式？	4 种：SIGNAL/SLOT宏、函数指针、QMetaMethod、lambda
linuxfb和eglfs平台的区别？	linuxfb纯软件渲染，eglfs使用 GPU 硬件加速
如何减少 Qt 程序的内存占用？	删除不需要的模块、使用-no-feature裁剪、启用优化
交叉编译 Qt 程序时如何指定 sysroot？	在.pro文件中添加QMAKE_LFLAGS += --sysroot=...

---

🎉 恭喜！你已经完成了第一个嵌入式 Qt GUI 程序的开发。现在你可以：

• 在 Ubuntu 中熟练配置 Qt Creator 的 ARM 工具链
• 编译带 Qt 的 Buildroot 系统并烧写到开发板
• 拖拽控件设计界面，添加按钮响应
• 通过 ADB 部署程序并在开发板上运行