在Visual Studio中创建嵌入式Qt Quick应用程序（1/2）

电玩女神 2022-11-21 14:54 434阅读 0赞

*本文翻译自[Creating an Embedded Qt Quick Application in Visual Studio (1/2)][Creating an Embedded Qt Quick Application in Visual Studio _1_2]  
原文作者：Miguel Costa，Qt公司高级软件工程师  
校审：Amos Yang*

Qt Visual Studio Tools现在支持Qt项目的交叉编译了。这个功能归功于Qt / MSBuild和Linux development VS workload的集成。本文将展示如何在Visual Studio中使用Qt Quick创建嵌入式应用程序。

我们将开发一个在镜像屏幕上显示公共信息的应用程序。它会运行在休息区、洗手间里的嵌入式Linux设备上。本文将使用树莓派3 ModelB，操作系统是Raspbian（Buster）。

![在目标设备上运行的Qt Quick嵌入式应用程序][Qt Quick] 在目标设备上运行的Qt Quick嵌入式应用程序

##    **准备开发环境** ##

开发主机是一台Windows 10计算机。必须安装Visual Studio 2019，包括桌面开发和Linux开发的工作组件。

![20201102114416235.png][] 所需的Visual Studio工作组件

我们将在Windows Subsystem for Linux（WSL）的实例中运行交叉编译器。设置开发环境的下一步是启用WSL并安装Linux发行版。然后应该可以打开终端窗口并运行Linux命令。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F0X0NoaW5h_size_16_color_FFFFFF_t_70][] WSL的命令行shell

要使用Qt Visual Studio Tools，必须安装一套Qt for Windows。这样，开发计算机上也能运行应用程序，达到测试目的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F0X0NoaW5h_size_16_color_FFFFFF_t_70 1][] 开发环境概述

## **交叉编译的Qt** ##

现在，我们可以继续设置交叉编译器，即可以安装预构建的工具链，也可以编译自己的工具链。如果一切顺利，我们应该能够在设备上运行一个简单的程序。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F0X0NoaW5h_size_16_color_FFFFFF_t_70 2][] 在树莓派上运行“ Hello World”

我们准备为树莓派构建Qt。为此，我们将遵循以下教程“RaspberryPi2EGLFS — A modern guide for cross-compiling Qt for HW accelerated OpenGL with eglfs on Raspbian and setting up Qt Creator”。构建完成后，我们就能够在树莓派上运行Qt应用程序示例。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F0X0NoaW5h_size_16_color_FFFFFF_t_70 3][] 在树莓派上运行Qt应用程序示例

## **设置Qt Visual Studio Tools** ##

在IDE中安装Qt Visual Studio Tools，打开Extensions > Manage Extensions。搜索“qt”：结果应显示“Qt Visual Studio Tools”扩展；选择它，然后点击“Download”。关闭VS，按照安装说明进行操作。重新打开VS后，Qt Visual Studio Tools就可以使用了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F0X0NoaW5h_size_16_color_FFFFFF_t_70 4][] Qt Visual Studio Tools菜单

要使用Qt Visual Studio Tools，我们必须首先注册将使用的Qt版本。我们将从注册Qt for Windows开始。

*  打开“ Qt VS Tools> Qt Options”，然后在“Qt Versions”选项卡上点击“Add”。
 *  提供名称和Qt安装的路径。

![20201102115316965.png][] 在Qt VS Tools中注册Qt for Windows

现在，我们将注册存放在WSL实例中的Qt的交叉编译版本。

*  在“Qt Versions”选项卡中再次点击“Add”以打开“Add New Qt Version”对话框。
 *  将“Build Host”设置为“Linux WSL”。（如果我们使用的是物理构建主机，而不是通过WSL使用虚拟构建主机，则可以选择“Linux SSH”。）
 *  提供Qt安装的名称和路径，以及要使用的编译器（默认为g++）。这里，我们将提供交叉编译器的路径。

![20201102115402639.png][] 注册为树莓派构建的Qt版本

## **创建一个多平台的Qt Quick项目** ##

注册将要使用的Qt版本后，我们可以创建一个Qt项目。

*  选择“File”>“New”>“Project”以打开“ Visual Studio”对话框以创建新项目
 *  在项目模板搜索中输入“ qt”，然后选择“ Qt Quick Application”
 *  点击“Next”；提供项目的名称和位置，然后点击“Create”。
 *  Qt Quick Application Wizard对话框将打开。点击“Next>”进行配置设置。
 *  为Windows和树莓派版本的Qt添加项目配置。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F0X0NoaW5h_size_16_color_FFFFFF_t_70 5][] 新项目配置

点击“Finish”完成项目创建向导。Visual Studio现在应该显示新的多平台Qt Quick项目。选择Windows配置，然后按F5键构建并运行该应用程序。然后应显示一个带有“Hello World”标题的空窗口。

##  ##

## **使用WSL在Visual Studio中交叉编译** ##

使用WSL实例运行交叉编译器比使用SSH连接到构建主机更快。使用SSH时，MSBuild必须首先将源文件上传到远程主机。另一方面，WSL将在/mnt挂载本地驱动器，从而使文件访问瞬间完成。这种情况下，MSBuild将Windows路径映射到/mnt中相对应的Linux路径，例如：

*  C:\\include\\foolib 映射到 /mnt/c/include/foolib ✔️

MSBuild假定属性页中提供的路径是本地路径，并自动将它们映射到/mnt。在属性页中使用Linux绝对路径时，这可能导致错误的映射，例如：

*  /home/user/raspi 映射到 /mnt/home/user/raspi ❌

为了避免该问题，我们将在/mnt中创建符号链接，映射到到WSL实例文件系统中其他顶级目录。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F0X0NoaW5h_size_16_color_FFFFFF_t_70 6][] 在/mnt中创建符号链接

现在准备好交叉编译项目了。选择一个Linux配置，按F7开始构建。

Visual Studio Build Output

1>------ Rebuild All started: Project: QuickMirror, Configuration: Release_RPi x64 ------
    1>Invoking 'mkdir -p $(dirname /mnt/c/Users/user/Source/Repos/QuickMirror/obj/x64/Release_RPi/qmake/temp/props.txt); mkdir -p /mnt/c/Users/user/Source/Repos/QuickMirror/obj/x64/Release_RPi/qmake/temp; cd /mnt/c/Users/user/Source/Repos/QuickMirror/obj/x64/Release_RPi/qmake/temp; ("/home/user/raspi/qt5/bin/qmake" -query) 1> props.txt', working directory: '/mnt/c/Users/user/Source/Repos/QuickMirror'
    1>Reading Qt configuration (/home/user/raspi/qt5/bin/qmake)
    1>Invoking 'mkdir -p $(dirname /mnt/c/Users/user/Source/Repos/QuickMirror/obj/x64/Release_RPi/qmake/temp/qtvars.pro); mkdir -p $(dirname /mnt/c/Users/user/Source/Repos/QuickMirror/obj/x64/Release_RPi/qmake/temp/Makefile); mkdir -p $(dirname /mnt/c/Users/user/Source/Repos/QuickMirror/obj/x64/Release_RPi/qmake/temp/qtvars.log); mkdir -p /mnt/c/Users/user/Source/Repos/QuickMirror/obj/x64/Release_RPi/qmake/temp; cd /mnt/c/Users/user/Source/Repos/QuickMirror/obj/x64/Release_RPi/qmake/temp; ("/home/user/raspi/qt5/bin/qmake" "CONFIG -= debug release debug_and_release" "CONFIG += release" qtvars.pro) 1> qtvars.log 2>&1', working directory: '/mnt/c/Users/user/Source/Repos/QuickMirror'
    1>rcc qml.qrc
    1>Invoking 'mkdir -p $(dirname qml.qrc); mkdir -p $(dirname /mnt/c/Users/user/Source/Repos/QuickMirror/main.qml); mkdir -p $(dirname /mnt/c/Users/user/Source/Repos/QuickMirror/obj/x64/Release_RPi/rcc/qrc_qml.cpp); (/home/user/raspi/qt5/bin/rcc /mnt/c/Users/user/Source/Repos/QuickMirror/qml.qrc --name qml -o /mnt/c/Users/user/Source/Repos/QuickMirror/obj/x64/Release_RPi/rcc/qrc_qml.cpp)', working directory: '/mnt/c/Users/user/Source/Repos/QuickMirror'
    1>Starting remote build

在VS中交叉编译Qt项目

## **接下来** ##

总而言之，我们在Visual Studio中创建了一个多平台的Qt Quick项目，用一个交叉编译工具链构建到树莓派平台。本文的下篇，我们关注：  
• 部署、运行应用程序  
• 应用程序的QML代码  
• 在目标设备上调试

[Creating an Embedded Qt Quick Application in Visual Studio _1_2]: https://www.qt.io/blog/creating-an-embedded-qt-quick-application-in-visual-studio-1/2
[Qt Quick]: /images/20221120/e15dc4ce2a414d6c99d499c4bb8bdd0c.png
[20201102114416235.png]: /images/20221120/877f520fbfc44dec984d8240f3b3700c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F0X0NoaW5h_size_16_color_FFFFFF_t_70]: /images/20221120/ce26dd24c20d4befb6ff4adf95c2cf5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F0X0NoaW5h_size_16_color_FFFFFF_t_70 1]: /images/20221120/8f76dda3be3e49918beaa537eaf66416.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F0X0NoaW5h_size_16_color_FFFFFF_t_70 2]: /images/20221120/1bbf9fb3dc724d7384593cb1f1e1f6a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F0X0NoaW5h_size_16_color_FFFFFF_t_70 3]: /images/20221120/4ff335dc9ebd4b5bbe38966ddcc077f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F0X0NoaW5h_size_16_color_FFFFFF_t_70 4]: /images/20221120/1303929cae814497825585ba4c9717b7.png
[20201102115316965.png]: /images/20221120/75e69bb348dc43d49a061d4b1fae3449.png
[20201102115402639.png]: /images/20221120/681b0f4970b947f9ab50a3e109d469d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F0X0NoaW5h_size_16_color_FFFFFF_t_70 5]: /images/20221120/99366d6ff67440b1b63a63cbf58b2261.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1F0X0NoaW5h_size_16_color_FFFFFF_t_70 6]: /images/20221120/c564580d109e413ea7e593790c122187.png