Qt行動裝置 App開發（一）：適配不同的螢幕

標籤：qt   android   

Qt行動裝置 App開發（一）：適配不同的螢幕

         到目前為止，Qt5.3已經出現很長一段時間了，並且已經有一些應用使用Qt進行構建了，我自己也完成了第一款使用Qt構建的手機遊戲《吃藥了》。那麼接下來的幾篇文章主要向大家分享我是怎樣使用Qt進行移動開發的。Qt行動裝置 App開發分為多篇部落格文章，每一篇文章都力求精簡不羅嗦，力求為大家提供一個快捷的參考。我在這裡也主要將使用Qt製作《吃藥了》的方法技巧一一分享給大家。

         說到行動裝置 App開發，第一想到的就是Android了，的確。Digia其實在為Qt制定向移動進軍的道路的時候充分地考慮了目前移動市場。首先Android是開源的，能夠爭取到很多軟硬體廠商，其次iOS是一款優秀的移動作業系統，最後Windows Phone 7/8也蓄勢待發，因此Digia主要在Qt5.0的時候引入了QPA的概念，這讓平台適配變得容易起來；Qt5.1的時候實現了Android作業系統的適配；Qt5.2的時候實現了iOS系統的適配；Qt5.3的時候實現了Windows Phone的適配。當然一些小眾移動開發平台比如說BB10、Ubuntu Phone和Jolla則是倒貼到Qt上來了。所以至此Qt已經能夠適應絕大多數移動平台，再加上嵌入式領域的一枝獨秀，Qt事實上已經成為適配平台最多的架構了。

         不過，哪怕是適配Android一個平台，由於Android系統的片段化以及Android應用是獨佔螢幕大小的，導致開發人員在開發應用的時候不得不考慮螢幕的解析度。那麼Qt是如何想辦法實現的不同螢幕的適配呢？如果你是使用純C++開發的Qt架構，那麼我的另外一篇文章可以協助你。現在我主要介紹一下QML是如何解決的。

1、使用錨布局方式

         QML使用了一種叫錨布局（anchorlayout）的布局方式，這就好比是知道了某個控制項的相對位置，然後另外一個控制項使用錨布局的方式很快就知道根據此控制項該如何擺放。比如說這個：

         右下角的“[email protected]”就是使用錨布局進行排列的：

Text{         anchors.bottom:parent.bottom         anchors.right:parent.right         text:"copyright©jcystudio"}

2、使用Screen來擷取螢幕解析度 

使用錨布局可能還不夠，因為圖片等元素一旦碰上了小解析度的螢幕就會顯示不全，這樣的使用者體驗是很差的，需要縮放才行。那麼問題就轉化為如何知道螢幕的解析度大小呢？這裡我們採用QtQuick.Window 2.2中的Screen類，即使用Screen.width和Screen.height來擷取擷取螢幕的大小。

         最後分享一下我開發《吃藥了》Android和案頭版適配螢幕解析度的方法：

Window{   id: root   width: Qt.platform.os === "android"? Screen.width: 320   height: Qt.platform.os === "android"? Screen.height: 480……}

         這段代碼的意思是如果當前的作業系統是Android，那麼使用Android螢幕的原生解析度，否則的話採用的是320×480的配置。下面是兩幅圖的對比：

下面是另一個我開發的應用適配不同解析度的對比：

         本文已參加《CSDN博文大賽》，請投我一票，支援更多Qt移動開發的原創內容！