Qt Quick Control 2 簡介

Qt Quick Controls 2

Qt Quick Controls 2是Qt官方從Qt 5.7開始提供的QML模組，主要是針對行動裝置或嵌入式系統所設計的，有興趣的可以直接參考官方提供的Gallery這個範例，你可以在該範例中看到各種常用的GUI元件顯示的樣式。

Note:
請注意，因為是Qt 5.7開始才納入，請務必安裝Qt 5.7以上的版本

---

UI 樣式

Qt Quick Controls 2提供了三種樣式，可以在此頁面看到示意圖，這三種樣式分別是

• Default : 預設樣式
• Material : 基於Google提出的Material樣式所設計
• Universal : 基於Microsoft提出的Universal樣式所設計

---

樣式設定

基於Qt Quick Controls 2的應用程式，可以透過三種方式變更其樣式。
以上述提到的Gallery為例，假設你已經透過Qt Creator開啟該範例專案，預設情況下執行結果會是採用了Default樣式，我們先不要透過該應用程式中所提供的Settings功能去變更樣式，來看看分別如何透過此三種方式來變更樣式(以Material樣式為例)
1. 透過環境變數設定
在Qt Creator中，切換到專案的執行設定畫面，參考下圖步驟加入環境變數QT_QUICK_CONTROLS_STYLE，其值為上述三種樣式的其中一種，這邊設定為material

設定好後，按下執行，顯示的就會是Material樣式，如下圖

2. 透過指令加上參數
同上，在Qt Creator中，切換到專案的執行設定畫面，在參考下圖在執行的設定中加入參數-style material(如果有跟著方式1’設定了環境變數，請先將該設定透過Unset清除掉)

3. 透過程式碼設定
以Gallery這個example為例，在main.cpp中，找到QQmlApplicationEngine engine;這一行，在其前面加上QQuickStyle::setStyle("material");，如下

    QQuickStyle::setStyle("material");
    QQmlApplicationEngine engine;

Note:
- 若採用程式碼設定，QQuickStyle::setStyle必須在載入QML檔之前，樣式設定才能生效
- 如果上述三種設定方式都存在，會以程式碼設定的為最後顯示的樣式。

---

樣式內容配置

針對不同的樣式，也可以變更該樣式下的內容，也就是說變更該樣式下的顏色或主題。
首先從專案目錄中的Resources中找到檔案qtquickcontrols2.conf並開啟，如下圖，假設目前樣式仍設定為Material，試著參考下圖將[Material]下的Primary值改為Pink，Theme的值改為Dark 。

然後重新執行，看到的畫面如下

上面提到的這個配置檔，裡面的設定值為key-value pair的組成，其中key為該樣式的屬性，可從此連結看到Material有哪些屬性，以及屬性值的型態，以Primary跟Accent來說，其值都是color，可透過色碼指定或事先定義好的顏色來設定

---

結語

Qt Quick Controls 2的UI設計非常符合現有廣泛的行動裝置，相信對大部分的使用者或開發人員，會是頻繁接觸到和非常值得學習的，如果你沒有碰過Qt Quick Controls 1.x，除非您需要開發的UI是傳統桌面應用程式之樣式，否則我強烈建議您直接學習Qt Quick Controls 2，一來是因為Qt Quick Controls 2提供的樣式較為新穎，二來是因為Qt Quick Controls 2 跟Qt Quick Controls 1.x有不少的差異性，有些QML 元件是相同名稱但用法卻不盡相同，所以可能會造成一些混淆，這是從Qt Quick Controls 1轉換到Qt Quick Controls 2時要特別注意的。