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永久生效bashexport ARCHarm export CROSS_COMPILEarm-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仓库同步因为很多软件包在国内下载慢百问网已经镜像到了国内服务器需要先更新一下仓库bashcd /home/book/100ask_imx6ull-sdk ../repo/repo sync -j4-j4表示用 4 个线程并行下载加快速度。3.2.2 进入 Buildroot 目录并清理bashcd /home/book/100ask_imx6ull-sdk/Buildroot_2020.02.x make clean # 清除之前的编译产物第一次可以不用3.2.3 配置为 100ask_imx6ull_pro 开发板带 Qtbashmake 100ask_imx6ull_pro_ddr512m_systemV_qt5_defconfig这个命令会生成一个.config文件告诉 Buildroot 要编译哪些组件Linux 内核、Qt5、各种驱动等。3.2.4 开始编译耗时较长约 1~2 小时bashmake all -j4-j4表示用 4 个 CPU 核心并行编译可以加快速度。如果你的电脑核心更多可以用-j8。3.3 编译输出文件编译成功后所有生成的文件都在output/images/目录下如图对应你的图片buildroot2020.02.x/output/images文件名说明zImageLinux 内核镜像100ask_imx6ull-14x14.dtb设备树文件rootfs.tar.bz2打包压缩的根文件系统用于 NFS 启动100ask-imx6ull-pro-512d-systemv-v1.img完整的系统镜像烧写用u-boot-dtb.imxU-Boot 引导程序重点100ask-imx6ull-pro-512d-systemv-v1.img这个文件就是我们用来烧写开发板的完整系统。4. 烧写系统到开发板 —— 使用烧写工具4.1 硬件连接开发板断电不要插 TF 卡如果插了先拔掉用USB OTG 线连接开发板的 OTG 口 和 电脑的 USB 口设置开发板的启动开关为USB 启动如图USB启动接上电源线和USB 串口线用于查看烧写日志4.2 准备烧写文件将编译出来的100ask-imx6ull-pro-512d-systemv-v1.img重命名为emmc.img如果要烧写到 EMMC或sdcard.img如果要烧写到 SD/TF 卡然后复制到烧写工具的files目录覆盖原有文件。烧写工具目录结构如图100ask_imx6ull_flashing_tooltext100ask_imx6ull_flashing_tool/ ├── files/ │ ├── emmc.img ← 重命名后放这里 │ ├── sdcard.img │ ├── zImage │ ├── u-boot-dtb.imx │ └── 100ask_imx6ull-14x14.dtb ├── 100ask_imx6ull_flashing_tool.exe └── ...4.3 执行烧写双击运行100ask_imx6ull_flashing_tool.exe在界面中选择设备EMMC或 SD点击“烧写整个系统”等待进度条走完直到界面提示---Execution completed, Please set to EMMC mode and restart the board.---将开发板的启动开关拨回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.run5.2 安装步骤在 Ubuntu 中双击下载好的.run文件选择“Run”开始安装。欢迎界面 → 点击NextQt Account 登录页面正常情况应该输入账号密码但国内网络可能无法登录。特殊技巧随便输入一个邮箱如12.com和密码点击Next会失败然后点击 Back 按钮就会跳过登录直接进入下一步。选择安装路径默认/home/book/Qt5.12.9选择组件至少勾选Qt 5.12.9和Qt Creator其他可按需选择。等待安装完成。5.3 启动 Qt Creator方法一通过桌面图标点击 Ubuntu 左下角的Activities搜索Qt Creator点击图标启动。方法二通过命令行bashcd ~/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语言选在左侧选择Kits→ 右侧标签页选择Compilers点击Add→ 选择Custom→C添加 C 编译器在弹出的对话框中Compiler path浏览选择/home/book/100ask_imx6ull-sdk/ToolChain/arm-buildroot-linux-gnueabihf_sdk-buildroot/bin/arm-buildroot-linux-gnueabihf-gMake path填写/usr/bin/makeABI依次选择arm→linux→generic→elf→32bit点击Apply保存。同样方法添加C 编译器路径选择arm-buildroot-linux-gnueabihf-gcc。6.3 设置调试器Debugger如图NewDebugger在Kits→Debuggers标签页点击AddName填写NewDebuggerPath浏览选择/home/book/100ask_imx6ull-sdk/ToolChain/arm-buildroot-linux-gnueabihf_sdk-buildroot/bin/arm-buildroot-linux-gnueabihf-gdbType选择GDBABI选择arm-linux-generic-elf-32bit点击Apply。6.4 添加 Qt 版本Qt Versions如图find -name qmake、qmake路径在Kits→Qt Versions标签页点击Add…浏览找到qmake文件。它的位置可以通过命令查找bashcd /home/book/100ask_imx6ull-sdk find -name qmake通常路径类似./Buildroot_2020.02.x/output/host/bin/qmake选择该qmake文件点击Open。此时会显示Qt 5.12.8 (host)点击Apply。6.5 配置 Kit套件Kit 是把编译器、调试器、Qt 版本、sysroot等打包在一起的一个配置。在Kits标签页点击Add设置如下Name100ask或任意名字Device typeDesktop因为我们是交叉编译运行在开发板但开发机是 PCSysroot填写交叉编译工具链的 sysroot 目录text/home/book/100ask_imx6ull-sdk/ToolChain/arm-buildroot-linux-gnueabihf_sdk-buildroot/arm-buildroot-linux-gnueabihf/sysroot/CompilerC选择刚才添加的CustomC 编译器CompilerC选择CustomC 编译器Debugger选择NewDebuggerQt version选择Qt 5.12.8 (host)点击Apply→OK保存。✅ 至此Qt Creator 已经完全配置好可以开始写 ARM 版 Qt 程序了。7. 编写第一个 Qt 程序 —— LED_and_TempHumi7.1 创建新项目如图New File or Project、Project Location菜单栏点击File→New File or Project选择Application→Qt Widgets Application→ 点击Choose…设置NameLED_and_TempHumiCreate in/home/book/LED_and_TempHumi可以点 Browse 创建目录勾选Use as default project location可选点击Next7.2 选择构建系统如图Define Build SystemBuild system选择qmakeQt 自带的构建工具点击Next7.3 选择基类如图Class InformationClass nameMainWindow默认Base classQMainWindow带菜单栏、状态栏的主窗口Generate form勾选会生成mainwindow.ui界面文件点击Next7.4 选择翻译文件如图Translation File如果不需要多语言保持Language为none直接点击Next7.5 选择 Kits如图Kits勾选我们刚才配置的100ask套件不要选 Desktop除非你想在 Ubuntu 本地运行点击Next7.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、拖拽控件在左侧项目树中双击Forms→mainwindow.ui进入Design模式。从左侧控件栏如图Display Widgets中拖拽一个Label标签到窗口中央双击修改文字为温度25°C拖拽另一个Label修改文字为湿度60%拖拽一个Push Button修改文字为点亮 LED再拖拽一个Push Button修改文字为关闭 LED调整控件位置和大小可以自由拖动。保存CtrlS。8.2 添加按钮点击响应代码如图on_pushButton_clicked双击“点亮 LED”按钮Qt Creator 会自动跳转到mainwindow.cpp并生成一个槽函数框架cppvoid MainWindow::on_pushButton_clicked() { // 在这里添加按钮点击时的处理代码 qDebug() LED clicked; // 在控制台打印信息 }qDebug()是 Qt 提供的调试输出会打印到开发板的串口终端。同样方法为“关闭 LED”按钮添加槽函数。8.3 构建编译项目如图Build All Projects点击菜单栏Build→Build Project “LED_and_TempHumi”或按快捷键CtrlB下方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 架构bashcd /home/book/LED_and_TempHumi/build-LED_and_TempHumi-100ask-Debug file LED_and_TempHumi输出应包含textELF 32-bit LSB executable, ARM, EABI5 version 1 (SYSV), dynamically linked, ...9. 在开发板上运行 Qt 程序9.1 手工运行首次测试步骤 1通过 ADB 上传可执行文件如图adb push LED_and_TempHumi /rootbashadb push LED_and_TempHumi /root步骤 2关闭开发板原有的 GUI避免冲突开发板出厂可能自带了 LVGL 或 HMI 界面需要先关掉bashadb shell mv /etc/init.d/*lvgl* /root # 移动 lvgl 启动脚本 mv /etc/init.d/*hmi* /root # 移动 hmi 启动脚本 reboot # 重启步骤 3重启后再次 ADB 登录设置环境变量并运行bashadb shell # 禁止 LCD 黑屏屏幕保护 echo -e \033[9;0] /dev/tty0 # 设置 Qt 运行环境 export QT_QPA_GENERIC_PLUGINStslib:/dev/input/event1 # 触摸屏驱动 export QT_QPA_PLATFORMlinuxfb: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_PLUGINStslib:/dev/input/event1 export QT_QPA_PLATFORMlinuxfb: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 $?设置可执行权限并添加到启动项bashchmod x /etc/init.d/S99myqt update-rc.d S99myqt defaults # 如果有 update-rc.d 命令重启后Qt 程序就会自动运行。10. 完整速查表 10.1 常用命令速查操作命令设置工具链export PATH...编译 Buildrootmake 100ask_imx6ull_pro_ddr512m_systemV_qt5_defconfig make all -j4启动 Qt Creator~/Qt5.12.9/Tools/QtCreator/bin/qtcreator.sh ADB 上传文件adb push 本地文件 /rootADB 登录开发板adb shell查看可执行文件架构file 文件名关闭开发板原有 GUImv /etc/init.d/*lvgl* /root10.2 环境变量速查变量值作用QT_QPA_PLATFORMlinuxfb:fb/dev/fb0使用帧缓冲显示QT_QPA_GENERIC_PLUGINStslib:/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 installedQt 版本未正确添加检查 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 foundOTG 线未连接到虚拟机在 VMware 可移动设备中连接Linux Foundation 100ASK_IMX6ULL12. 扩展学习建议 12.1 进阶阅读Qt 官方文档https://doc.qt.io/qt-5/Qt 信号与槽机制深入理解connect用法Qt 样式表 (QSS)美化界面12.2 动手实验添加更多控件如进度条、滑动条并绑定实际硬件LED 亮度调节读取温湿度传感器在 Qt 中调用 I2C 驱动实时显示数值使用 QML体验更现代的声明式界面开发网络编程用QTcpSocket实现远程控制12.3 常见面试题问题答案要点Qt 信号槽有几种连接方式4 种SIGNAL/SLOT宏、函数指针、QMetaMethod、lambdalinuxfb和eglfs平台的区别linuxfb纯软件渲染eglfs使用 GPU 硬件加速如何减少 Qt 程序的内存占用删除不需要的模块、使用-no-feature裁剪、启用优化交叉编译 Qt 程序时如何指定 sysroot在.pro文件中添加QMAKE_LFLAGS --sysroot... 恭喜你已经完成了第一个嵌入式 Qt GUI 程序的开发。现在你可以在 Ubuntu 中熟练配置 Qt Creator 的 ARM 工具链编译带 Qt 的 Buildroot 系统并烧写到开发板拖拽控件设计界面添加按钮响应通过 ADB 部署程序并在开发板上运行