QT跨平台實作13-跨平台實作進階：彈性調整螢幕解析度，包括Windows、OSX、iOS、Android下之實例－Philip4G四眼仙機的部落格

四種不同的作業系統平台，解析度不一樣該如何呢？

啟稿: 2015/02/28

完稿: 2015/03/28

QT CueTai線索台

跨平台實作13-跨平台實作進階：彈性調整螢幕解析度，包括Windows、OS X、iOS、Android四作業系統下之實例

雖然我們的應用程式在四種不同的作業系統都可以順利執行了，但仔細分析來看，除了Windows及OSX因為可以自定視窗大小，所以時鐘畫面配置如同我們規畫的正方形；但是在行動裝置iOS、Android的作業系統下，就會發現視窗會擴展變成同裝置螢幕解析度大小；另外我們在”進階設計01-對話框程式設計”中增加了configure對話框，看其來在其他作業系統都很正常，就是在Android作業系統畫面大小似乎被切掉了!但是仔細來看，畫面並不是被切掉，而是照原來在Qt Designer的大小來顯示，只是在Android作業系統來看，此設計大小相對就不大，無法蓋到原來背景錶面，所以這與對話框在跨平台作業系統表現與解析度有關，因此我們在此來研究如何針對不同的作業系統平台來彈性調整螢幕解析度。

l 在QT下彈性調正螢幕解析度之設計

在QT下想要彈性調整隨著裝置大小來調整畫面螢幕解析度，這方面的設計可在QT說明畫面的搜尋欄位輸入keyword " Scalability"，將看到如下的資訊：

內文主要提到多項使用者設計上的需求如下：

動態螢幕縮放比例(Resizing Screens Dynamically)
動態螢幕配置 (Laying out Screens Dynamically)
處理畫素密度(Handing Pixel Density)
根據裝置平台載入適當的檔案 (Loading Files Depending on Platform)
隨選元件載入(Loading Components on Demand)
切換擺置方向 (Switching Orientation)

以我們現在所遇到的問題，應該從第一項”動態螢幕縮放比例”與第二項”動態螢幕配置”來找尋答案，深入研究這兩節會發現QT是採用QT Quick來達成的，與我們在此使用傳統C++的方法大不相同，所以看其來這部分的暫時沒有幫助，待其後我們學習QML時，再來進行研究。

雖然說明文件是採用QT Quick來達成的好像對我們現在沒有幫助，但他提醒了我們兩個重點，也就是原來第一項”動態螢幕縮放比例” 提醒了我們在手持式裝置如iPhone, Android phone其解析度是大不相同，所以我們必須相知道手持式裝置的解析度才好適應性控制；另外第二項”動態螢幕配置”更提醒了我們配置上的問題，各位可以再仔細看Android作業系統所表現出來的configure對話框，畫面並不是被切掉，而是照原來在Qt Designer的大小來顯示，只是在Android作業系統來看，此設計大小相對就不大；另外畫面不僅是太小，而且顯示的字型屬於大字型，所以所有的訊息都揪在一起，如下圖：

這就代表畫面上面的元件配置是照著小畫面來擺置的，但是換成手持裝置畫面解析度變大並且字型相對也是大字，所以訊息就被切掉了，因此我們除了改變解析度外，也應該動態螢幕配置。

有關螢幕解析度的資訊，各位可以在QT說明畫面的搜尋欄位輸入keyword " QScreen"，將看到如下的資訊：

其中availableSize就可以知道目前裝置的螢幕解析度的資訊，進一步來改變configure對話框的大小，我們以此為基礎在下一節中來改變原來的程式。

l 修改程式：改變畫面大小

前面已說過，我們可以從availableSize就可以知道目前裝置的螢幕解析度的資訊，所以在configure對話框初始化時先得到資訊，利用configure對話框初始化時設定其畫面大小，所以在Configure::Configure(QWidget *parent)下加入以下程式：

    QScreen *Screen = QGuiApplication::primaryScreen();

    QSize ScreenSize = Screen->availableSize();

    this->setGeometry(QRect(0,0,ScreenSize.width(),ScreenSize.height()));

另外還可以採用下面這種方法，就是在其上層直接改變對話框的大小，所以我們就必須在上層AnalogClock class畫面中的mouseDoubleClickEvent事件加入以下程式來修正大小：

    conf.setGeometry(QRect(0,0,ScreenSize.width(),ScreenSize.height()));

兩種方法都可得到同樣的結果如下：

現在configure的框架已經可以蓋掉原來背景錶面，但是內部所有的物件還是照原先設計絕對位置放置，而且顯示的字型屬於大字型，所以所有的訊息還是都揪在一起，所以我們接下來就得改變元件位置。

l 再次修改程式：改變元件位置

在設計UI的時候，所有的標籤、下拉選單都是放在Layout載器上，所以我們只要將verticalLayout改變寬度，內部所有的標籤、下拉選單都會跟著調整適當位置；所以我們利用這個特性，加入如下的程式就可將verticalLayout改變寬度與畫面一樣寬：

        ui->verticalLayout->setGeometry(QRect(10,10,(ScreenSize.width()-20),150));

理論上，我們將此行程式加在對話框初始化時，畫面就應該能正常顯示，但是實際測試時發現，畫面根本沒有變化，看起來對話框初始化不支援內部元件的調整；因此我們將verticalLayout改變寬度的程式移到updateConfig，由上層在mouseDoubleClickEvent事件加入updateConfig，如此就是在對話框初始化後才進行內部元件的調整。修正後建制執行的情況如下圖：