基于QtQuick的跨平臺移動應用開發關鍵技術研究

鄭純軍　賈寧

摘 要：Qt Quick是一項新技術，基于Qt Quick編寫的應用程序可跨平臺運行，本文描述了Qt Quick的應用在移動終端的自適應，QML與C++、Java語言的交互，QML連接數據庫、Http下載與JSON解析技術，并闡述了Qt Quick的移動應用打包過程。

關鍵詞：Qt Quick；跨平臺；移動應用；QML

中圖分類號：TP368.1 文獻標識碼：A

Abstract：Qt Quick is a new technology，the application can run cross-platform based on Qt Quick.The paper described the adaptive terminal technology of Qt Quick application and described QML how to interact with C ++，Java language，QML how to connect to database.Then the paper introduced the technology of Http download and JSON parsing.The last， the paper described the mobile app packaging process.

Keywords：Qt Quick；agile；mobile app；QML

1 引言（Introduction）

隨著移動互聯網的飛速發展，新的移動設備或可穿戴設備不斷涌現，如智能手表、智能自行車等，使移動設備應用軟件的跨平臺開發成為移動互聯網企業關注的熱點。

目前移動應用軟件的開發主要有三種模式：本地應用、Web應用、混合應用。本地應用可以充分發揮硬件本身的特性，但不同硬件設備，不同操作系統所使用的編程語言、開發環境各不相同，這使得開發的應用程序無法適應多個平臺；Web應用雖然可以適應多個硬件平臺，但對特定硬件的高級使用表現不佳；混合應用將兩者結合起來，在一定程度上實現了本地的高級應用與Web應用的兼容。但如何實現開發的應用在桌面、移動終端、智能設備上同時運行是移動互聯網開發者關注的熱點。

Qt是跨平臺應用和GUI（圖形用戶界面）的開發框架，用戶只需一次編寫代碼，便可非常方便的部署在桌面、移動設備與嵌入式系統中運行。目前支持的操作系統有Android、BlackBerry、iOS、Linux/X11、Mac OS X、Windows等。Qt面向對象，而且很容易擴展，是目前非常流行的一種開發工具。而Qt Quick是Qt 4.7中推出的一項新技術，它可輕松地創建供移動和嵌入式設備使用的動態觸摸式界面和輕量級應用程序，它引入了一種陳述性的腳本語言QML，用于動態設計和描述GUI，使設計過程快速靈活，易于使用[1]，這一技術的出現為實現跨平臺應用的開發提供了一個新的思路。本文將對Qt Quick的跨平臺應用開發關鍵技術做深入的研究與應用。

2 自適應UI設計（Adaptive UI design）

交互界面（UI）作為終端與用戶交流的基本形式，改善UI的體現形式是提升人機交互舒適感的最佳途徑[2]。開發人員經常從單一的界面元素或者操作流程出發，設計整體應用程序的界面特征，用戶對于此種方式的界面體驗往往較為單調[3]，缺少整體美感。此外，跨平臺的應用程序涉及的終端種類較多，為達到一次編寫、處處可用的效果，必須設計自適應的界面效果，即針對不同的終端，界面的形式與大小將自動變化，從而實現和諧的比例、視覺上的對稱感。

2.1 適應屏幕旋轉

考慮到部分終端存在重力感應器，在變換姿勢時，界面的元素存在正交變換[4]，因此在界面設計的過程中，需要對元素的坐標進行靈活處理，即坐標位置不固定，相對位置固定。同時界面的對稱軸兩側需要體感平衡，橫縱向均呈現對稱關系，除此之外，還需要對Qt Quick的環境變量QWS_DISPLAY進行設置。為達到用戶欣賞界面的平衡感，界面元素的面積和分布要合理，避免布局失衡、局部過于緊湊而產生的信息遺失感。

2.2 適應屏幕尺寸

屏幕尺寸的自適應是UI設計的重要環節之一，目前流行的終端尺寸眾多，無法為全部尺寸的應用程序逐一定制界面，界面尺寸的自動更新可大量減少界面開發的工作量。在界面設計過程中，首先需要對界面元素進行差異化布局，使具備一定的誘導效率，用戶可明顯感受到次序感和優先感。此外，在使用Qt Quick技術時，對界面各個元素進行相對布局，保證每個元素的縮放比例、相對位移、像素平移均步調一致，即界面凝聚成為一個整體。最終，在對Qt Quick新建的工程進行相關設置的基礎上，可實現對屏幕尺寸的自適應。

除此之外，界面的中心協調度[5]、布局的緊湊程度、節奏感以及四象限元素的布局形式均對UI的設計產生一定的影響，開發人員需要在維持需求的基礎上，對界面的美度進行分析和評價，從而提升應用程序的美觀性。

3 跨平臺交互技術（Cross platform interactive technology）

跨平臺是指編程語言、軟件、硬件設備可以在多種平臺上運行工作[6]，跨平臺技術指相關的編程語言可以實現源代碼級別的復用，即程序一次編寫，處處編譯運行。QML作為Qt Quick技術中的一種新型的編程語言，可以實現快速的界面設計，并提供界面的動作響應、過渡動畫效果。

但是，界面美觀的設計并非是程序設計成功的唯一檢驗形式，人機交互的設計同樣起到決定作用。利用QML實現的人機交互主要體現為應用層次上，即系統功能和應用的層次，與模型有關的所有數據和交互操作都在于此，可以實現功能上的數據傳輸。本文主要針對常見的交互形式進行介紹，在QML的數據傳輸過程中，無一例外的使用到QtDeclarative模塊，它是專門為交互而創建的新型模塊。

3.1 QML與C++交互

在對嵌入式設備、手機終端等支持Linux/X11、Windows操作系統進行開發時，往往需要實現QML與C++的數據傳輸。這種數據傳輸可以通過以下兩種形式實現：QML引用C++對象和QML、C++方法相互調用。

以最常見的第一種形式為例，需要為QML注冊C++對象環境。在C++實現中，非可視化的型別均為QObject的子類，可視化的類型均為QDeclarativeItem的子類。此時，QDeclarativeItem等同于QML的Item類。

如果用戶想要定義自己的類別，可按照以下步驟進行操作：

（1）在C++中，實現派生于QObject或QDeclarativeItem的子類，它是新定義item的實體對象。

（2）在C++中，將步驟1中實現的新item類型注冊給QML。

（3）在QML中，導入含有步驟1中定義的新item的模塊。

（4）在QML中，向使用標準的item一樣使用新定義的item。此時，可直接在QML中調用新定義的item。圖1描述了此種交互方法的具體流程。

QML與C++方法相互調用的形式適用于以功能為主的快速原型開發，通過它，應用程序可以很方便地把QML組件嵌入到QGraphicsView中，若想將QML與C++程序結合，程序中至少需要一個QDeclarativeEngine。為了使所有QML組件實例可以工作，QDeclarativeEngine為它們提供全局配置，QDeclarativeEngine對于C++中使用QML的作用如同QNetworkAccessManager對于網絡通信、路徑對于持久化存儲的作用。

通過使用QDeclarativeComponent加載QML Documents。每一個QDeclarativeComponent實例對應一個QML document。此外，還可以傳遞一個Document URL或者表示Document內容的原始文本給QDeclarativeComponent。Document URL可以是本地文件系統URL，或者任何QNetworkAccessManager支持的網絡URL。

通過QDeclarativeComponent：：create（）方法創建QML組件實例，這時數據通過跟上下文暴露給所有對象實例，向QML組件實例暴露數據，最終通過QML屬性綁定（Property Bindings）和JavaScript對象訪問應用程序設置上下文屬性。

3.2 QML與Java交互

QML與Java的交互主要應用于Android操作系統的程序開發過程中，Qt 5中針對不同的平臺適配并開發了不同的模塊，下文將詳細介紹典型的交互模塊Qt Android Extras。

QtAndroid Extras模塊包含了三個類以及一個命名空間：QAndroidActivityReceiver用來接收Android的Activity的結果；QAndroidJniEnvironment用來訪問JNI環境變量；QtAndroidJniObject對應dalvik虛擬機中的普通Java類。此外QtAndroid命名空間中存在一些全局函數，用來與Java代碼進行交互，比如使用QtAndroid：：androidActivity（）來獲得當前運行的Activity等。

在開發Android平臺應用程序時，往往需要將QML與C++、Java的交互結合使用，即使用QML調用C++注冊的單例函數來實現調用C++代碼，再通過QtAndroidJniObject：：callMethod（）來調用Java的本地方法。具體形式如圖2所示。

3.3 QML連接數據庫

在實際應用程序開發過程中，數據庫的使用是不可或缺的重要操作，QML中提供了數據庫本地存儲的解決方案，它通過openDatabaseSync（）函數提供一個能夠訪問SQL數據庫的本地脫機存儲，一般會將這個函數封裝在JS function內部。

打開SQL數據庫時，將生成數據庫文件，默認此文件在QDeclarativeEngine：：offlineStoragePath（）路徑下，同時利用void setOfflineStoragePath（const QString & dir）方法修改路徑。

此外，QML還提供了相關的數據模型進行數據信息的組織，如ListModel、XmlListModel、VisualItemModel等，不同模型具備不相同的表現形式，在實際操作過程中可以將數據存到數據庫里，程序啟動的時候從數據庫中讀取數據，退出的時候將Model中的數據存放回數據庫中。

3.4 HTTP下載與JSON解析

在應用程序開發過程中，網絡是常見的功能模塊，它是用戶與用戶之間溝通的接口。在Qt Quick中，無法直接利用網絡模塊進行通信，需要在QML與C++、Java的交互的基礎上進行網絡數據的封裝與傳遞。

HTTP下載的具體流程如下。首先，利用QNetworkAccessManager類發送網絡請求和接受回復，利用QNetworkRequest類來管理請求，QNetworkReply類返回一個對象，它接收回復信息，并對數據進行處理。當數據下載完成后，Manager會發出finished（）信號。在關聯信號的基礎上，相關函數將對接收的數據進行處理，使用reply→readAll（）函數就可以將下載的所有數據讀出。

應用程序在獲取全部數據的基礎上，往往需要將進行數據解析，得到目標信息。Qt可以調用fromJson（）方法來解析文本形式的JSON數據。fromJson（）接受UTF-8格式的JSON數據和QJsonParseError對象指針，fromJson（）方法返回后，JSON數據就都被解析為Qt定義的各種JSON對象。最終根據數據生成QJsonDocument對象即可尋找到對應的信息，再進行相應的信息轉換即可獲得目標信息。

4 跨平臺發布（Cross platform release）

應用程序開發和測試結束并未直接向公眾開放，開發人員操作的最后一個環節是應用程序的發布，程序開發的平臺不同，發布的操作方法存在一定的差異。

面向Andoid、iOS等操作系統的應用程序發布過程較為簡易，使用Qt 5版本開發的應用程序可以利用開發平臺的Qt for Android、Qt for iOS直接將程序生成相應的APK文件和IPA文件，將文件導入相應的終端后即可測試運行。

面向Linux、BlackBerry等系統的發布形式較為繁瑣，此時需要打包生成適用于系統安裝的RPM文件。具體的實現流程如下：

（1）安裝打包套件，建立打包的環境。

（2）書寫spec文件，此類文件對于變量的設置要求較高。

（3）準備桌面圖片，桌面文件和桌面程序的鏈接文件。

（4）生成rpm文件，并檢查程序重要文件的拷貝路徑是否正確。此時生成的文件即是此類操作系統的安裝文件，可以進行安裝測試。

5 結論（Conclusion）

Qt Quick是一種新的技術，基于Qt Quick的應用程序可跨平臺運行，它為用戶提供了很好的交互方式，本文介紹了Qt Quick應用程序的自適應、QML與C++、Java語言的交互、連接數據庫、HTTP下載、JSON解析關鍵技術，事實表明基于Qt Quick的應用程序開發簡單，調用靈活，具有很好的應用價值。

參考文獻（References）

[1] 熊萱，杜祝，譚欽文.基于Qt Quick的消息分發模型研究[J].艦船電子工程，2012，32（8）：105.

[2] 周蕾，薛澄岐，湯文成.界面元素布局設計的美度評價方法[J].計算機輔助設計與圖形學學報，2013，25（5）：759.

[3] 吳芳.基于事件的跨平臺移動應用開發框架設計與實現[J].科技風，2014（12）：26.

[4] 施偉，王碩蘋，郭鳴.跨平臺移動應用中間適配層設計與實現[J].計算機工程與應用，2014（16）：39.

[5] 施瑩.快速構建跨平臺移動應用開發方案[J].價值工程，2013（29）：197.

[6] 潘曉夢，鄧建華，蘇厚勤.一種跨平臺移動應用方案的研究與實踐[J].計算機應用與軟件，2013，30（1）：181.

作者簡介：

鄭純軍（1976-），男，碩士，副教授.研究領域：圖像理解，嵌入式系統開發.

賈 寧（1985-），女，碩士，講師.研究領域：嵌入式系統開發.