ProjectQT，Project_汽車知識網

在上文中（），我們展示了如何在Visual Studio中針對Windows和嵌入式Linux創建多平臺Qt Quick應用程序項目。現在，我們將演示如何在嵌入式設備上運行該應用程序。然后，我們將繼續開發該項目，實現預定的完整嵌入式應用程序。最后，我們將使用VS調試器對應用的C ++和QML代碼進行遠程調試。

在嵌入式設備上運行

ProjectQT

我們已經演示了如何交叉編譯在Visual Studio中創建的“hello world” Qt Quick應用程序。現在，我們將看到如何在樹莓派上運行該應用程序。由于我們將以全屏模式運行，因此必須首先在應用程序窗口中添加一些內容。

main.qmlWindow {visible: truetitle: qsTr(&34;)Text {id: clockfont.pointSize: 72Timer {interval: 1000; running: true; repeat: trueonTriggered: clock.text = (new Date).toLocaleTimeString(Qt.locale(&34;)，&34;);}}}

ProjectQT

Qt Quick &34;

和以前一樣，選擇Linux項目配置，然后按F7鍵開始交叉編譯。

Visual Studio構建輸出

1>------ Build started: Project: QuickMirror，Configuration: Debug_RPi x64 ------1>rcc qml.qrc1>Invoking &39;，working directory: &39;1>Starting remote build1>Compiling sources:1>qrc_qml.cpp1>Linking objects1>QuickMirror.vcxproj -> C:\Users\user\Source\Repos\QuickMirror\bin\x64\Debug_RPi\QuickMirror.out========== Build: 1 succeeded，0 failed，0 up-to-date，0 skipped ==========

VS中交叉編譯Qt項目

現在我們把應用程序的二進制文件上傳到樹莓派。構建輸出窗口顯示了生成的二進制文件的位置（倒數第二行）。

Windows命令提示

Project，C:\Users\user> scp C:\Users\user\Source\Repos\QuickMirror\bin\x64\Debug_RPi\QuickMirror.out pi@192.168.1.98:/home/pi/pi@192.168.1.98's password:QuickMirror.out 100% 465KB 1.6MB/s 00:00C:\Users\user>

將應用程序二進制文件上傳到目標設備

要在為了在每次構建結束時自動復制應用程序文件，可以在“ WSL Post-Build Event”屬性頁中設置如下命令（注意：這將以明文形式保存設備密碼）。

Project Properties > WSL Post-Build Event > Command Line

curl --insecure --user pi: -T /mnt/$(TargetPath.Replace(&39;，&39;).Replace(&39;，&39;).ToLower()) scp:///home/pi/$(TargetFileName)

在每次構建結束時將二進制文件復制到設備端

在啟動Qt Quick應用程序之前，我們需要設置一些必需的環境變量：

LD_LIBRARY_PATH： Qt二進制文件安裝的路徑。

QT_QPA_PLATFORM：QPA平臺插件。

QT_QPA_PLATFORM_PLUGIN_PATH：QPA平臺插件安裝的路徑。

QT_QPA_EGLFS_PHYSICAL_WIDTH、QT_QPA_EGLFS_PHYSICAL_HEIGHT：物理屏幕的寬度和高度，以毫米為單位。

QML2_IMPORT_PATH：安裝的QML模塊的路徑。

樹莓派命令外殼

pi@raspberry-pi:~$ export LD_LIBRARY_PATH=&34;pi@raspberry-pi:~$ export QT_QPA_PLATFORM=&34;pi@raspberry-pi:~$ export QT_QPA_PLATFORM_PLUGIN_PATH=&34;pi@raspberry-pi:~$ export QT_QPA_EGLFS_PHYSICAL_WIDTH=&34;pi@raspberry-pi:~$ export QT_QPA_EGLFS_PHYSICAL_HEIGHT=&34;pi@raspberry-pi:~$ export QML2_IMPORT_PATH=&34;pi@raspberry-pi:~$ ./QuickMirror.out

樹莓派顯示器

1. 轉到"設置"|Project |Project單擊"狀態"按鈕。2. 創建名為"最終狀態"或所需的任何內容的新狀態，并標記"不顯示"復選框。3. 轉到卡片|Project |Project項目的狀態更改為最終狀態。另請標記"已關閉以Project"和"已。

在樹莓派上運行“ Hello World”應用程序

應用程序開發過程

應用程序的要求包括顯示以下信息：

當前時間

當前日期

重要公共紀念日

天氣預報

下一班公共交通工具

新聞

我們將把每個功能項封裝為獨立的QML類型。為此，我們必須首先將QML模塊定義（qmldir）文件添加到項目中：

選擇&34;。

在位置字段中，設置包含QML文件的文件夾路徑。

向項目添加新的QML模塊定義

將QML類型映射到源文件

將新的QML源文件添加到項目中：

選擇“Project > Add New Item... > Qt > QML File"”。

將位置設置為qmldir同級目錄。

設置QML文件名。

按“Add”。

向項目添加新的QML文件

具體操作步驟如下：1、首先第一步我們打開電腦之后進入到該軟件的主界面中，然后點擊左上角的file這個選項。2、點擊文件選項之后，下一步在出現的左邊菜單中，找到最下方的一個Options這個選項，點擊進入到軟件的選項設置界面。

我們將首先添加用于顯示當前時間、當前日期和重要公共紀念日的QML類型。該Clock類型將顯示當前時間，每秒刷新一次。

Text {font.family: FontFamily_Clockfont.styleName: FontStyle_Clockfont.pointSize: 144color: &34;renderType: Text.NativeRenderingantialiasing: falsefunction refresh() {text = (new Date).toLocaleTimeString(Qt.locale(&34;)，&34;);}Component.onCompleted : refresh();Timer {interval: 1000; running: true; repeat: true onTriggered: parent.refresh();}}

Clock QML類型的定義

該Calendar類型將顯示當前日期，并在不同城市名之間循環。

Text {renderType: Text.NativeRenderingid: calendarcolor: &34;font.family: FontFamily_Boldfont.styleName: FontStyle_Boldfont.pointSize: 72property var locales: [&34;，&34;，&34;]property var localeIdx: 0function capitalize(s) {return s.replace(/(^|-)./g，function(c) { return c.toUpperCase(); });}function setNextLocale() {localeIdx = (localeIdx + 1) % locales.length;}function getCurrentText() {var date = new Date;var locale = Qt.locale(locales[localeIdx]);var calendarText = capitalize(date.toLocaleDateString(locale，&34;));var monthShort = date.toLocaleDateString(locale，&34;);var monthLong = date.toLocaleDateString(locale，&34;);if (monthLong.length <= 5) {calendarText += capitalize(monthLong);} else {calendarText += capitalize(monthShort);if (!monthShort.endsWith(&34;))calendarText += &34;;}calendarText += date.toLocaleDateString(locale，&34;);return calendarText;}Component.onCompleted: {text = getCurrentText();}Timer {interval: 15000; running: true; repeat: trueonTriggered: {setNextLocale();text = getCurrentText();}}Behavior on text {SequentialAnimation {NumberAnimation { target: calendar; property: &34;; to: 0.0; duration: 1000 }PropertyAction { target: calendar; property: &34; }NumberAnimation { target: calendar; property: &34;; to: 1.0; duration: 500 }}}}

Calendar QML類型的定義

除了日期/時間，我們的應用程序還將依靠Web API來檢索信息。我們將在一個單獨的進程中運行curl以連接到Web API。進程創建由名為Process的C ++類處理。然后，QML類型ApiCall將通過一個Process對象傳送必要的參數運行curl并收集其輸出。

Item {property var url: &34;property var path: []property var query: []signal response(var response)signal error(var error)Process {id: curlproperty var path: Q_OS_WIN ? &34; : &34;property var request: &34;command: path + &34;&34;\&34;}function sendRequest() {curl.request = url;if (path.length > 0)curl.request += &34; + path.join(&34;);if (query.length > 0)curl.request += &34; + query.join(&34;);curl.start();}Connections {target: curlonExit /*(int exitCode，QByteArray processOutput)*/ : {if (exitCode != 0) {console.log(&34; + exitCode);console.log(&34; + curl.request);return error(&34; + exitCode);}try {return response(JSON.parse(processOutput));} catch (err) {console.log(&34; + err.toString());console.log(&34; + curl.request);console.log(&34; + processOutput);return error(err);}}}}

ApiCall QML類型的定義

創建Process的C ++類：

選擇&34;

將類名設置為Process

按“Add”

向項目添加新的Qt C ++類

Process.h

public:Q_INVOKABLE void start();void setCommand(const QString& cmd);QString command() const;signals:void commandChanged();void exit(int exitCode，QByteArray processOutput);protected:void onFinished(int exitCode，QProcess::ExitStatus status);void onErrorOccurred(QProcess::ProcessError error);private:QString m_command;};Process.cppProcess(QObject* parent) : QProcess(parent){connect(this，QOverload::of(&QProcess::finished)，this，&Process::onFinished);connect(this，&QProcess::errorOccurred，this，&Process::onErrorOccurred);}Process::~Process(){}void Process::setCommand(const QString& cmd){if (cmd != m_command) {m_command = cmd;emit commandChanged();}}QString Process::command() const{return m_command;}void Process::start(){if (state() == ProcessState::NotRunning)QProcess::start(m_command);elseqInfo() << &34; << m_command;}void Process::onFinished(int exitCode，QProcess::ExitStatus status){emit exit((status == ExitStatus::NormalExit) ? exitCode : -1，readAll());}void Process::onErrorOccurred(QProcess::ProcessError error){qInfo() << &34; << error;}main.cppint main(int argc，char* argv[]){qmlRegisterType(&34;，1，0，&34;);...

Process類的定義

該OnThisDay QML類型將使用ApiCall的實例來獲取重要公共紀念日列表，并每隔幾秒鐘循環一次。

QuickMirror.OnThisDay.qml

Item {id: onThisDayclip: trueproperty int viewportHeightproperty var events: []property var births: []property var deaths: []property int idxEventType: -1ApiCall {id: onThisDayApiproperty int month: 0property int day: 0property string eventType: &34;url: &34;on-this-day&34;.json&34;events&34;births&34;births&34;*&34;deaths&34;deaths&34;^?&34;events&34;white&34; – &34;y&34;opacity&34;y&34;opacity&34;white&34;black&34;transparent&34;transparent&34;black&34;black"}}

現在，我們已經定義了一些應用程序的QML類型，我們將在主QML文件上組織它們。

main.qml

最后，所有QML文件和qmldir文件必須添加到應用程序的資源文件中：

雙擊項目樹中的QRC文件

在“Qt Resource Editor”窗口中，按“Add > Add Files”

選擇所有QML文件和qmldir文件

在Qt Resource Editor中按“Save”

QML文件和qmldir已添加到資源文件

構建和部署后，我們將能啟動應用程序并查看顯示的信息。

在樹莓派上運行的應用程序

在Visual Studio中進行調試

VS支持通過gdb調試運行在WSL上的應用程序。要在樹莓派上運行過程中調試，我們將使用gdbserver啟動應用程序，然后配置gdb連接到設備并啟動遠程調試會話。