Qt Quick Controls 2新穎界面開發(fā)

1、22.1 Qt Quick Controls 2簡介簡介22.2 Qt Quick Controls 2與與1的比較的比較22.3 滑動翻頁及隱藏面板滑動翻頁及隱藏面板22.4 選項列表選項列表22.5 帶功能按鈕的列表帶功能按鈕的列表（1）大部分控件的內(nèi)部狀態(tài)使用C+而非QML處理，以提高效率。（2）樣式類型不再提供可被控件動態(tài)實例化的組件，但控件自身由可被替換的項目委托（item delegates）組成。事實上，這意味著委托（delegates）成為Qt Quick項目，被實例化為控件的屬性并與所在控件形成簡單的父子關(guān)系。（3）程序模塊化和簡單化。當需要將多個控件復合成一個控件時，往往將

2、它們分隔進獨立的構(gòu)建代碼塊中，例如，一個典型的復合滾動條視圖控件代碼：ScrollView horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff Flickable / 它可以通過替換可綁定到任何Flickable的簡單ScrollBar/ScrollIndicator控件來合成得到，如下：Flickable / ScrollBar.vertical: ScrollBar Qt Quick Controls 1與2的API特性對比見表22.1（其中，“”表示支持，數(shù)字標注說明見表格下方）特 性Qt Quick ControlsQt Quick Con

3、trols 2類型化委托預構(gòu)建本地類型運行時類型/主題改變12可用于桌面系統(tǒng)可用于移動平臺3可用于嵌入式系統(tǒng)3內(nèi)部事件處理QMLC+1. 無官方公開支持，但技術(shù)上可能通過私有API實現(xiàn)。2. 只有特殊樣式的主題能在運行時改變，而樣式是固定不變的。3. 性能尚未優(yōu)化【例】【例】（簡單）（CH2201）本章依然從一個簡單的程序入手，系統(tǒng)地介紹Qt Quick Controls 2開發(fā)的基礎(chǔ)知識。創(chuàng)建Qt Quick Controls 2程序，步驟如下。（1）啟動Qt Creator，單擊主菜單“文件”“新建文件或項目”項，彈出“New File or Project”對話框，選擇項目“Applic

4、ation”下的“Qt Quick Controls 2 Application”模板，如圖22.1所示。（2）單擊“Choose”按鈕，在“Qt Quick Controls 2 Application”對話框的“Project Location”頁輸入項目名稱“Qcontrol2Demo”，并選擇保存項目的路徑，如圖22.2所示。（3）單擊“下一步”按鈕，在“Define Project Details”頁選擇Qt Quick Controls 2樣式類型為“Default”，如圖22.3所示。（4）單擊“下一步”按鈕，在“Kit Selection”頁系統(tǒng)默認已指定程序的編譯器和調(diào)試器，

5、直接單擊“下一步”按鈕，如圖22.4所示。（5）接下來的“Project Management”頁自動匯總出要添加到該項目的文件，如圖22.5所示。單擊“完成”按鈕完成Qt Quick Controls 2應(yīng)用程序的創(chuàng)建。單擊 運行程序，出現(xiàn)“Hello World”窗口。該窗口包含兩個標簽頁“First”和“Second”，其中“First”頁上有一個按鈕“Press Me”和一個文本框，在文本框中輸入“Hello World”，單擊“Press Me”按鈕，在開發(fā)環(huán)境底部“應(yīng)用程序輸出”子窗口顯示“Button Pressed. Entered text: Hello World”，如圖2

6、2.6所示。上面這個程序是由Qt Creator環(huán)境自動生成的，是一個典型的Qt Quick Controls 2應(yīng)用程序，展開項目視圖可以看到其目錄結(jié)構(gòu)，如圖22.7所示，主要有三個文件：main.qml、Page1.qml和Page1Form.ui.qml。1main.qml項目啟動的主程序文件main.qml，代碼。2Page1.qmlPage1.qml文件中只有一個Page1Form元素，它是項目默認Page1頁面的主窗體元素，一般用來存放Page1頁上各控件的事件處理代碼，在本項目中是“Press Me”按鈕的單擊（onClicked）事件代碼，如下：import QtQuick 2

7、.7Page1Form button1.onClicked: console.log(Button Pressed. Entered text: + textField1.text); 3Page1Form.ui.qmlPage1Form.ui.qml是默認Page1頁的主窗體實現(xiàn)文件，代碼如下：import QtQuick 2.7import QtQuick.Controls 2.0/導入Qt Quick Controls 2.0庫import QtQuick.Layouts 1.0/導入Qt Quick布局庫 Item /QML通用的根元素/* 定義屬性別名，為在其他.qml文件中引用這2

8、個控件 */ property alias textField1: textField1 property alias button1: button1 RowLayout /水平布局 anchors.horizontalCenter: parent.horizontalCenter/在頁面上居中 anchors.topMargin: 20/距頂部20像素 anchors.top: parent.top/頂端對齊 TextField /文本框控件 id: textField1 placeholderText: qsTr(Text Field) Button /按鈕控件 id: button1

9、text: qsTr(Press Me) 4界面主題樣式界面主題樣式Qt Quick Controls 2支持三種類型的界面主題樣式：Default（默認）、Material（質(zhì)感）和普通（Universal），之前創(chuàng)建項目工程時選擇的是默認樣式（圖22.3），可通過修改項目的qtquickcontrols2文件配置來更換樣式類型。qtquickcontrols2 .conf文件內(nèi)容如下：;This file can be edited to change the style of the application;See Styling Qt Quick Controls 2 in the d

10、ocumentation for details:;http:/doc.qt.io/qt-5/qtquickcontrols2-styles.html ControlsStyle=Default UniversalTheme=Light;Accent=Steel MaterialTheme=Light;Accent=BlueGrey;Primary=BlueGray其中，加黑處即需要修改配置的地方。將其改為Material，運行程序，看到質(zhì)感的界面如圖22.8所示；若改為Universal，則呈現(xiàn)的界面如圖22.9所示。22.2.1 ApplicationWindow結(jié)構(gòu)不同結(jié)構(gòu)不同在Qt Q

11、uick Controls 1中，主應(yīng)用窗口ApplicationWindow由菜單欄（Menu Bar）、工具欄（Tool Bar）、內(nèi)容顯示區(qū)（Content Area）和底部狀態(tài)欄（Status Bar）等構(gòu)成，而Qt Quick Controls 2的主應(yīng)用窗口結(jié)構(gòu)則要簡單得多，它僅由頭部（Header）、內(nèi)容（Content）和尾部（Footer）三部分組成，兩者的區(qū)別如圖22.10所示。在Qt Quick Controls 2中，一般聲明ApplicationWindow為整個應(yīng)用的根元素，其最簡單的代碼形式如下：import QtQuick.Controls 2.1Applica

12、tionWindow visible: true header: ToolBar / . footer: TabBar / . SwipeView anchors.fill: parent / . 1ToolBar工具欄工具欄【例】【例】（簡單）（CH2201-a1）工具欄。ToolBar是應(yīng)用廣泛的上下文相關(guān)控件（如導航按鈕、搜索框等）的容器，其典型代碼。運行效果如圖22.11所示。2TabBar選項標簽欄選項標簽欄【例】【例】（簡單）（CH2201-a2）標簽欄。Qt Quick Controls 2使用TabBar/TabButton控件組合來實現(xiàn)頁面選項標簽欄，以取代原Qt Quick

13、 Controls 1中TabView/Tab組合的功能。代碼的形式如下：TabBar / . width: parent.width TabButton text: FirstTab/ . TabButton text: SecondTab/ . TabButton text: ThirdTab/ . 一旦所有選項標簽的寬度和加起來超過了屏幕寬度，標簽欄就會自適應(yīng)調(diào)整為可滑動切換狀態(tài)，代碼如下。ApplicationWindow visible: true width: 240 height: 480 title: qsTr(標簽欄) header: TabBar id: bar width

14、: parent.width Repeater model: 第一頁, 第二頁, 第三頁, 第四頁, 第五頁 TabButton text: modelData width: Math.max(100, bar.width / 5) 運行效果如圖22.12所示。【例】【例】（簡單）（CH2201-a1續(xù)）一個典型的工具欄彈出式菜單的例子。代碼如下。運行程序，單擊工具欄上右側(cè)的 按鈕，彈出菜單如圖22.13所示。1ButtonGroup取代取代ExclusiveGroup組框組框在原Qt Quick Controls 1中，成組的選項按鈕由ExclusiveGroup組織在一起，例如21.2.2

15、“學生信息表單”實例（實例文件CH2102）中，有如下代碼：GroupBox /* 組框 */ id: group1 title: qsTr(性別) Layout.fillWidth: true RowLayout ExclusiveGroup id: sexGroup /* 互斥選項組*/ RadioButton /* 單選按鈕 */ text: qsTr(男) checked: true exclusiveGroup: sexGroup Layout.minimumWidth: 65/設(shè)置控件所占最小寬度為65 RadioButton text: qsTr(女) exclusiveGrou

16、p: sexGroup Layout.minimumWidth: 65 這段代碼實現(xiàn)了“性別”單選按鈕組，而在Qt Quick Controls 2中，單選按鈕組改由ButtonGroup組織，如下：GroupBox /* 組框 */ id: group1 title: qsTr(性別) Layout.fillWidth: true RowLayout ButtonGroup id: sexGroup /* 互斥選項組*/ RadioButton /* 單選按鈕 */ text: qsTr(男) checked: true ButtonGroup.group: sexGroup Layout.

17、minimumWidth: 65/設(shè)置控件所占最小寬度為65 RadioButton text: qsTr(女) ButtonGroup.group: sexGroup Layout.minimumWidth: 65 2TextArea滾動條實現(xiàn)方式不一樣滾動條實現(xiàn)方式不一樣在Qt Quick Controls 1中，TextArea組件繼承自ScrollView，因此始終自帶滾動條；而在Qt Quick Controls 2中，TextArea只是個簡單的多行文本編輯器，可選擇性地綁定到滑動頁組件以提供滾動條功能。這樣就可以在帶滾動條的頁面上使用TextArea而不會出現(xiàn)雙重滾動區(qū)域嵌套的情

18、形，從而避免了不確定性和由此帶來的可用性問題。將TextArea綁定到一個滑動頁組件的典型代碼如下：Flickable id: flickable anchors.fill: parent TextArea.flickable: TextArea text: TextArean.n.n.n.n.n.n wrapMode: TextArea.Wrap ScrollBar.vertical: ScrollBar 3新增新增Tumbler翻選框控件翻選框控件【例】【例】（簡單）（CH2201-a3）翻選框控件使用。實現(xiàn)步驟如下。（1）新建Qt Quick Controls 2應(yīng)用程序，項目名稱為“T

19、umblerDialog”。（2）打開main.qml文件，修改代碼如下：程序運行效果如圖22.14所示。4一些界面控件顯示風格的差異一些界面控件顯示風格的差異【例】【例】（簡單）（CH2201-a4）部分控件對比顯示效果。創(chuàng)建一個Qt Quick Controls 2應(yīng)用程序，打開main.qml文件，編寫代碼如下：運行程序，效果如圖22.15所示?！纠俊纠浚y度中等）（CH2202）制作一個藝術(shù)品欣賞程序，采用多頁面，每一頁顯示一幅藝術(shù)品圖片，以及品名、作者、創(chuàng)作年代信息，單擊界面下方的滑動點來切換頁面，如圖22.16所示。每件藝術(shù)品還附帶有詳細的介紹信息，在界面右側(cè)的隱藏面板內(nèi)，用戶

20、可隨時拉出來查看，運行效果如圖22.17所示。實現(xiàn)步驟如下。（1）新建Qt Quick Controls 2應(yīng)用程序，項目名稱為“ArtView”。（2）在項目工程目錄中建一個images文件夾，其中放入本例要用到的三張圖片，文件名為“蒙娜麗莎.jpg”、“大衛(wèi).jpg”、“圣母.jpg”。（3）右擊項目視圖“資源”“qml.qrc”下的“/”節(jié)點，選擇“添加現(xiàn)有文件”項，從彈出對話框中選擇這些圖片打開，將它們加載到項目中。（4）雙擊項目視圖打開Page1Form.ui.qml文件，編寫代碼。（5）打開Page1.qml文件，編寫代碼。（6）打開main.qml文件，修改代碼?！纠俊纠浚y度中等）（CH2203）實現(xiàn)一個圖書選擇瀏覽程序，采用選項列表的形式，界面左邊是所有書名的列表，用戶選中的項以淡灰色背景突出顯示，同時在右邊圖片框中顯示對應(yīng)該書的封面圖片，運行效果如圖22.18所示。實現(xiàn)步驟如下。（1）新建Qt Quick Controls 2應(yīng)用程序，項目名稱為“BookView”。（2）在項目工程目錄中建一個images文件夾，其中放入本例要用到的所有圖書的封面圖片。（3）右擊項目視圖“資源”“qml.qrc”下的“/”節(jié)點，選擇“添加現(xiàn)有文件”項，從彈出對話框中選擇這些圖片打開