企业官网建设流程全解析

前言

上一篇环境搭好了，接下来就是真正的开发环节。很多嵌入式开发者都有过这样的痛苦经历：

• 交叉编译工具链配置半天，环境变量各种出错
• 每次改完代码，要手动scp到开发板，再ssh上去运行
• 调试只能靠printf打日志，效率极低

Qt Onboard的一大优势就是与Qt Creator IDE的深度集成——交叉编译工具链预配置好，一键部署，远程调试开箱即用。

本文就带你实战走一遍完整的开发-编译-部署-调试流程，用Qt Quick写一个Hello World应用，并跑在高通跃龙IQ-9075 EVK平台上。

1、交叉编译与部署架构

先看架构图，理解整个编译部署流程：

架构图说明：

• 左侧（开发主机）：Qt Creator IDE → 源代码 → 交叉编译工具链 → 生成ARM64可执行文件
• 中间（网络传输）：SSH/SFTP部署 + GDB远程调试
• 右侧（目标设备）：Qt Runtime 6.11 → 已部署应用 → GDB Server + SSH Server → HDMI显示输出

核心要点：交叉编译在PC端完成，生成aarch64架构的可执行文件；部署通过SSH/SFTP将文件传输到开发板；调试通过GDB Client/Server架构实现远程源码级调试。

2、完整开发流程图

下面这张Mermaid图展示了从创建项目到在设备上运行调试的完整流程：

3、实战步骤详解

3.1 创建第一个Qt Quick项目

步骤1：新建项目

打开Qt Creator，按照以下路径操作：

文件 → 新建文件或项目 → 应用程序 → Qt Quick Application (Empty)

填写项目信息：

步骤2：选择构建套件

在"Kit Selection"步骤，你会看到至少两个Kit：

• ✅Desktop Qt 6.11.x— 桌面端编译，用于快速开发验证
• ✅Qt 6.11.x QtOnboard IQ-9075— 交叉编译，部署到开发板

建议两个都勾选，桌面Kit用于快速迭代UI，IQ-9075 Kit用于真机部署。

步骤3：理解项目结构

创建完成后，项目结构大致如下：

HelloOnboard/ ├── CMakeLists.txt # CMake构建脚本 ├── main.cpp # 应用入口 ├── qml.qrc # QML资源文件 ├── Main.qml # 主界面QML文件 ├── imports/ # QML导入模块 └── build-*/ # 构建输出目录

打开Main.qml，你会看到默认的Hello World模板：

import QtQuick import QtQuick.Window Window { width: 640 height: 480 visible: true title: qsTr("Hello World") Text { text: qsTr("Hello World") anchors.centerIn: parent } }

3.2 桌面端快速验证

在进行交叉编译之前，建议先用桌面Kit快速验证界面效果。

步骤1：切换到Desktop Kit

点击Qt Creator左下角的构建套件选择器，选择Desktop Qt 6.11.x。

步骤2：运行

点击左下角的绿色运行按钮（▶️），或者按Ctrl+R。

如果一切正常，你会看到一个弹出窗口，显示"Hello World"文字。

💡技巧：桌面端调试效率高，建议先在桌面把UI和逻辑调好，再部署到开发板验证。

3.3 交叉编译与部署

现在进入重头戏——交叉编译并部署到IQ-9075开发板。

步骤1：切换到QtOnboard Kit

点击左下角的构建套件选择器，切换到Qt 6.11.x QtOnboard IQ-9075。

步骤2：验证设备连接

在开始部署之前，确认设备连接正常：

工具 → 选项 → 设备 → 设备

选中你的IQ-9075设备，点击测试按钮。如果显示测试成功，说明连接正常。

⚠️ 如果设备连接失败，请回顾第一篇中的设备配置步骤，检查IP地址、用户名密码、网络连通性。

步骤3：编译项目

点击左下角的锤子图标（🔨）进行编译，或者按Ctrl+B。

编译过程中，你可以在编译输出面板看到交叉编译的过程：

Running steps for project HelloOnboard... Configuration unchanged, skipping CMake step. Starting build... [1/5] Building CXX object CMakeFiles/HelloOnboard.dir/main.cpp.o [2/5] Building QRCC file .qrc/qml_qrc.cpp [3/5] Building CXX object CMakeFiles/HelloOnboard.dir/.qrc/qml_qrc.cpp.o [4/5] Linking CXX executable HelloOnboard [5/5] Generating appname Build completed successfully.

🔍观察：注意编译输出中的工具链前缀——aarch64-oe-linux-，这就是Yocto SDK提供的交叉编译器。

步骤4：一键部署

点击运行按钮（▶️），Qt Creator会自动完成：

1. 编译检查：如果代码有改动，先重新编译
2. 文件传输：通过SFTP将可执行文件和依赖的Qt库传输到开发板
3. 启动应用：通过SSH在开发板上启动应用
4. 输出重定向：将应用的stdout/stderr输出显示在Qt Creator的"应用输出"面板

部署过程的输出类似这样：

Deploying to IQ-9075 EVK... Uploading file "/path/to/HelloOnboard" to "/opt/QtOnboard/apps/HelloOnboard/HelloOnboard" Uploading Qt libraries... Uploading Qt Quick modules... Deployment finished. Starting remote process...

这时，你应该能在连接IQ-9075的HDMI显示器上看到你的Qt Quick应用了！

3.4 实战进阶：打造一个更丰富的界面

光有Hello World不够意思，我们来做一个稍微复杂点的界面——一个显示设备信息的仪表盘。

修改Main.qml：

import QtQuick import QtQuick.Window import QtQuick.Controls import QtQuick.Layouts Window { width: 800 height: 480 visible: true title: "Qt Onboard 设备仪表盘" color: "#0F172A" ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // 标题 Text { text: "🚀 Qt Onboard 设备状态" font.pixelSize: 28 font.bold: true color: "#F8FAFC" Layout.alignment: Qt.AlignHCenter } Text { text: "Qualcomm IQ-9075 EVK" font.pixelSize: 14 color: "#94A3B8" Layout.alignment: Qt.AlignHCenter } // 状态卡片行 RowLayout { Layout.alignment: Qt.AlignHCenter spacing: 20 // CPU状态 Rectangle { width: 180 height: 120 radius: 12 color: "#1E293B" border.color: "#334155" border.width: 1 ColumnLayout { anchors.centerIn: parent spacing: 5 Text { text: "⚡ CPU" font.pixelSize: 16 color: "#F8FAFC" Layout.alignment: Qt.AlignHCenter } Text { text: "8 Cores" font.pixelSize: 24 font.bold: true color: "#00A896" Layout.alignment: Qt.AlignHCenter } Text { text: "Cortex-A76" font.pixelSize: 11 color: "#64748B" Layout.alignment: Qt.AlignHCenter } } } // NPU状态 Rectangle { width: 180 height: 120 radius: 12 color: "#1E293B" border.color: "#334155" border.width: 1 ColumnLayout { anchors.centerIn: parent spacing: 5 Text { text: "🧠 NPU" font.pixelSize: 16 color: "#F8FAFC" Layout.alignment: Qt.AlignHCenter } Text { text: "Hexagon HTP" font.pixelSize: 18 font.bold: true color: "#F59E0B" Layout.alignment: Qt.AlignHCenter } Text { text: "AI Accelerator" font.pixelSize: 11 color: "#64748B" Layout.alignment: Qt.AlignHCenter } } } // 系统状态 Rectangle { width: 180 height: 120 radius: 12 color: "#1E293B" border.color: "#334155" border.width: 1 ColumnLayout { anchors.centerIn: parent spacing: 5 Text { text: "📱 系统" font.pixelSize: 16 color: "#F8FAFC" Layout.alignment: Qt.AlignHCenter } Text { text: "Qt 6.11" font.pixelSize: 22 font.bold: true color: "#38BDF8" Layout.alignment: Qt.AlignHCenter } Text { text: "Yocto Linux" font.pixelSize: 11 color: "#64748B" Layout.alignment: Qt.AlignHCenter } } } } // 底部操作按钮 RowLayout { Layout.alignment: Qt.AlignHCenter spacing: 15 Button { text: "刷新状态" font.pixelSize: 14 Layout.preferredWidth: 120 Layout.preferredHeight: 40 onClicked: { console.log("Refreshing device status...") } } Button { text: "关于设备" font.pixelSize: 14 Layout.preferredWidth: 120 Layout.preferredHeight: 40 onClicked: { console.log("Qt Onboard for IQ-9075 EVK") } } } // 底部提示 Text { text: "Qt Onboard Development Kit — Powered by Qt & Qualcomm" font.pixelSize: 11 color: "#475569" Layout.alignment: Qt.AlignHCenter Layout.bottomMargin: 10 } } }

修改完后，重新编译并部署，你会在IQ-9075上看到一个科技感十足的仪表盘界面！

3.5 远程调试技巧

程序出Bug了？不用慌，Qt Creator支持完整的远程源码级调试。

步骤1：启动调试

点击左下角的调试按钮（🐛），或者按F5。

Qt Creator会自动：

1. 以Debug模式重新编译（包含调试信息）
2. 部署带调试符号的可执行文件到设备
3. 在设备上启动gdbserver
4. 本地GDB Client连接到设备端的gdbserver
5. 应用启动并停在main函数入口

步骤2：设置断点

在代码行号左侧点击，设置断点（会出现红色圆点）。程序运行到断点处会暂停。

步骤3：常用调试操作

步骤4：查看变量和调用栈

调试时可以在右侧面板查看：

• 局部变量和表达式：查看当前作用域的变量值
• 监视表达式：添加自定义变量或表达式进行监视
• 调用栈：查看函数调用层级
• 断点：管理所有断点

💡QML调试：Qt Creator还支持QML调试，可以在QML代码中设置断点，查看QML属性值。确保在项目设置中启用了QML调试。

3.6 命令行交叉编译（高级）

如果你更喜欢命令行操作，或者需要在CI/CD中进行自动化构建，可以直接使用SDK中的交叉编译工具链。

加载SDK环境

# 加载Yocto SDK环境变量source~/Qt/6.11.x/QtOnboard/IQ-9075/sdk/environment-setup-cortexa76-oe-linux# 验证交叉编译器echo$CC# 输出类似: aarch64-oe-linux-gcc ...whichqmake# 输出Qt的qmake路径

使用CMake交叉编译

# 创建构建目录mkdirbuild-arm64&&cdbuild-arm64# 使用SDK中的CMake工具链文件配置cmake..\-DCMAKE_TOOLCHAIN_FILE=$OECORE_NATIVE_SYSROOT/usr/share/cmake/OEToolchainConfig.cmake\-DQt6_DIR=/path/to/qt6/lib/cmake/Qt6\-DCMAKE_BUILD_TYPE=Release# 编译make-j$(nproc)

手动部署

# 通过SCP传输可执行文件scpHelloOnboard root@192.168.1.100:/opt/QtOnboard/apps/# SSH运行sshroot@192.168.1.100cd/opt/QtOnboard/apps ./HelloOnboard

4、常见问题与排错

Q1：交叉编译报错 “undefined reference to …”

可能原因：链接时找不到对应的库

解决方法：

1. 确认使用了正确的QtOnboard Kit
2. 在CMakeLists.txt中添加需要的模块：

   find_package(Qt6 REQUIRED COMPONENTS Quick Qml) target_link_libraries(app PRIVATE Qt6::Quick Qt6::Qml)

3. 清理构建目录重新编译

Q2：部署失败，提示"连接超时"

排查步骤：

1. 确认开发板和电脑在同一局域网
2. ping开发板IP，确认网络通
3. 手动测试SSH连接：ssh root@<设备IP>
4. 检查设备上SSH服务是否运行

Q3：应用在设备上启动失败，提示"could not find the Qt platform plugin"

可能原因：Qt平台插件没有正确部署

解决方法：

1. 在项目设置的"部署"步骤中，确认勾选了"Deploy Qt Libraries"
2. 检查设备上Qt库是否完整：ls /usr/lib/qt6/plugins/
3. 手动设置QML导入路径：

   exportQML2_IMPORT_PATH=/usr/lib/qt6/qmlexportQT_QPA_PLATFORM=eglfs

Q4：远程调试无法命中断点

可能原因：

• 使用了Release模式编译（没有调试符号）
• 二进制文件和源码不匹配

解决方法：

1. 切换到Debug构建模式
2. 清理后重新编译部署
3. 确认源码文件路径和编译时一致

5、性能优化小贴士

1. 编译速度优化

# 使用ccache加速重复编译# 在CMake配置中添加-DCMAKE_CXX_COMPILER_LAUNCHER=ccache

2. 部署速度优化

• 增量部署：Qt Creator默认只传输改动的文件
• 使用部署脚本：对于复杂项目，可以自定义部署步骤
• 网络优化：使用有线网络，比WiFi快很多

3. 应用启动优化

• 使用Quick Compiler预编译QML
• 减少启动时的资源加载
• 考虑使用Splash Screen提升体验

6、总结

本篇我们深入实战了Qt Onboard的交叉编译与部署流程，核心要点回顾：

本篇核心收获：

1. ✅ 掌握Qt Quick项目的创建与配置
2. ✅ 理解交叉编译原理与QtOnboard Kit的使用
3. ✅ 学会一键部署应用到IQ-9075开发板
4. ✅ 掌握远程GDB调试技巧
5. ✅ 了解命令行交叉编译方法

在下一篇中，我们将进入多媒体与摄像头的实战，讲解如何在Qt Onboard中使用GStreamer播放视频、通过ALSA处理音频、以及接入USB摄像头——这些都是FactoryPulse方案中的关键定制功能。

系列索引：（一）环境搭建全攻略 · （二）Qt Creator交叉编译与一键部署实战 · （三）多媒体与摄像头集成· （四）边缘AI应用

如果本文对你有帮助，欢迎点赞、收藏、关注！有问题也欢迎在评论区交流~