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

嵌入式×边缘AI：打怪升级日志2026-04-15 21:33

@[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 下载安装包

5.2 安装步骤

  1. 在 Ubuntu 中，双击下载好的 .run 文件，选择 "Run" 开始安装。
  2. 欢迎界面 → 点击 Next
  3. Qt Account 登录页面
    • 正常情况应该输入账号密码，但国内网络可能无法登录。
    • 特殊技巧 ：随便输入一个邮箱（如 1@2.com）和密码，点击 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
  1. 点击 Apply 保存。
  2. 同样方法添加 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 部署程序并在开发板上运行
相关推荐
嵌入式×边缘AI：打怪升级日志9 小时前
使用文件 I/O 操作硬件 —— 从 LED 到温湿度传感器
qt·led·温湿度传感器
雒珣11 小时前
Qt实现命令行参数功能示例：QCommandLineParser
开发语言·数据库·qt
史迪仔011213 小时前
[QML] 交互事件深度解析：鼠标、键盘、拖拽
前端·c++·qt
一晌小贪欢14 小时前
PyQt5 开发一个 PDF 批量合并工具
开发语言·qt·pdf
swift1922114 小时前
Qt多语言问题 —— 静态成员变量
开发语言·c++·qt
用户8055336980314 小时前
现代Qt开发教程（新手篇）1.4——容器
c++·qt
qq_4663024514 小时前
u盘插入拔出，listView不显示盘符变化
c++·qt
blog.pytool.com15 小时前
ZLG USBCAN-II 接口使用
qt
秋月的私语16 小时前
遥感影像拼接线优化工具：基于Qt+GDAL+OpenCV的从一到二实践
开发语言·qt·opencv
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点03一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛04GPT-6核心能力解析及与现有主流大模型对比05基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南06零成本！Ollama本地部署国产大模型全指南（支持Kimi-K2.5/GLM-5/Qwen，新手秒上手）07免费！不限量！用opencode接入英伟达（NVIDIA）大模型，轻松打造你的 AI 编程助手08从限购到畅通：GLM-5.1 Coding Plan接入攻略09CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南10AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析