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

第22章QtQuickControls2新穎界面開(kāi)發(fā)

22.1QtQuickControls2簡(jiǎn)介22.2QtQuickControls2與1的比較22.3滑動(dòng)翻頁(yè)及隱藏面板22.4選項(xiàng)列表22.5帶功能按鈕的列表2021/5/9122.1QtQuickControls2簡(jiǎn)介（1）大部分控件的內(nèi)部狀態(tài)使用C++而非QML處理，以提高效率。（2）樣式類型不再提供可被控件動(dòng)態(tài)實(shí)例化的組件，但控件自身由可被替換的項(xiàng)目委托（itemdelegates）組成。事實(shí)上，這意味著委托（delegates）成為QtQuick項(xiàng)目，被實(shí)例化為控件的屬性并與所在控件形成簡(jiǎn)單的父子關(guān)系。（3）程序模塊化和簡(jiǎn)單化。當(dāng)需要將多個(gè)控件復(fù)合成一個(gè)控件時(shí)，往往將它們分隔進(jìn)獨(dú)立的構(gòu)建代碼塊中，例如，一個(gè)典型的復(fù)合滾動(dòng)條視圖控件代碼：ScrollView{horizontalScrollBarPolicy:Qt.ScrollBarAlwaysOffFlickable{//…}}它可以通過(guò)替換可綁定到任何Flickable的簡(jiǎn)單ScrollBar/ScrollIndicator控件來(lái)合成得到，如下：Flickable{//…ScrollBar.vertical:ScrollBar{}}2021/5/9222.1QtQuickControls2簡(jiǎn)介QtQuickControls1與2的API特性對(duì)比見(jiàn)表22.1（其中，“√”表示支持，數(shù)字標(biāo)注說(shuō)明見(jiàn)表格下方）特

性QtQuickControlsQtQuickControls2類型化委托√√預(yù)構(gòu)建本地類型√

運(yùn)行時(shí)類型/主題改變√1√2可用于桌面系統(tǒng)√√可用于移動(dòng)平臺(tái)√3√可用于嵌入式系統(tǒng)√3√內(nèi)部事件處理QMLC++1.無(wú)官方公開(kāi)支持，但技術(shù)上可能通過(guò)私有API實(shí)現(xiàn)。2.只有特殊樣式的主題能在運(yùn)行時(shí)改變，而樣式是固定不變的。3.性能尚未優(yōu)化2021/5/9322.1.1第一個(gè)QtQuickControls2程序【例】（簡(jiǎn)單）（CH2201）本章依然從一個(gè)簡(jiǎn)單的程序入手，系統(tǒng)地介紹QtQuickControls2開(kāi)發(fā)的基礎(chǔ)知識(shí)。創(chuàng)建QtQuickControls2程序，步驟如下。（1）啟動(dòng)QtCreator，單擊主菜單“文件”→“新建文件或項(xiàng)目…”項(xiàng)，彈出“NewFileorProject”對(duì)話框，選擇項(xiàng)目“Application”下的“QtQuickControls2Application”模板，如圖22.1所示。2021/5/9422.1.1第一個(gè)QtQuickControls2程序（2）單擊“Choose…”按鈕，在“QtQuickControls2Application”對(duì)話框的“ProjectLocation”頁(yè)輸入項(xiàng)目名稱“Qcontrol2Demo”，并選擇保存項(xiàng)目的路徑，如圖22.2所示。2021/5/9522.1.1第一個(gè)QtQuickControls2程序（3）單擊“下一步”按鈕，在“DefineProjectDetails”頁(yè)選擇QtQuickControls2樣式類型為“Default”，如圖22.3所示。2021/5/9622.1.1第一個(gè)QtQuickControls2程序（4）單擊“下一步”按鈕，在“KitSelection”頁(yè)系統(tǒng)默認(rèn)已指定程序的編譯器和調(diào)試器，直接單擊“下一步”按鈕，如圖22.4所示。2021/5/9722.1.1第一個(gè)QtQuickControls2程序（5）接下來(lái)的“ProjectManagement”頁(yè)自動(dòng)匯總出要添加到該項(xiàng)目的文件，如圖22.5所示。單擊“完成”按鈕完成QtQuickControls2應(yīng)用程序的創(chuàng)建。2021/5/9822.1.1第一個(gè)QtQuickControls2程序單擊運(yùn)行程序，出現(xiàn)“HelloWorld”窗口。該窗口包含兩個(gè)標(biāo)簽頁(yè)“First”和“Second”，其中“First”頁(yè)上有一個(gè)按鈕“PressMe”和一個(gè)文本框，在文本框中輸入“HelloWorld”，單擊“PressMe”按鈕，在開(kāi)發(fā)環(huán)境底部“應(yīng)用程序輸出”子窗口顯示“ButtonPressed.Enteredtext:HelloWorld”，如圖22.6所示。2021/5/9922.1.2QtQuickControls2程序的構(gòu)成上面這個(gè)程序是由QtCreator環(huán)境自動(dòng)生成的，是一個(gè)典型的QtQuickControls2應(yīng)用程序，展開(kāi)項(xiàng)目視圖可以看到其目錄結(jié)構(gòu)，如圖22.7所示，主要有三個(gè)文件：main.qml、Page1.qml和Page1Form.ui.qml。2021/5/91022.1.2QtQuickControls2程序的構(gòu)成1．main.qml項(xiàng)目啟動(dòng)的主程序文件main.qml，代碼。2．Page1.qmlPage1.qml文件中只有一個(gè)Page1Form元素，它是項(xiàng)目默認(rèn)Page1頁(yè)面的主窗體元素，一般用來(lái)存放Page1頁(yè)上各控件的事件處理代碼，在本項(xiàng)目中是“PressMe”按鈕的單擊（onClicked）事件代碼，如下：importQtQuick2.7Page1Form{button1.onClicked:{console.log("ButtonPressed.Enteredtext:"+textField1.text);}}2021/5/91122.1.2QtQuickControls2程序的構(gòu)成3．Page1Form.ui.qmlPage1Form.ui.qml是默認(rèn)Page1頁(yè)的主窗體實(shí)現(xiàn)文件，代碼如下：importQtQuick2.7importQtQuick.Controls2.0 //導(dǎo)入QtQuickControls2.0庫(kù)importQtQuick.Layouts1.0 //導(dǎo)入QtQuick布局庫(kù)

Item{ //QML通用的根元素 /*定義屬性別名，為在其他.qml文件中引用這2個(gè)控件*/propertyaliastextField1:textField1propertyaliasbutton1:button1

RowLayout{ //水平布局anchors.horizontalCenter:parent.horizontalCenter //在頁(yè)面上居中anchors.topMargin:20 //距頂部20像素anchors.top:parent.top //頂端對(duì)齊

TextField{ //文本框控件id:textField1placeholderText:qsTr("TextField")}

Button{ //按鈕控件id:button1text:qsTr("PressMe")}}}2021/5/91222.1.2QtQuickControls2程序的構(gòu)成4．界面主題樣式QtQuickControls2支持三種類型的界面主題樣式：Default（默認(rèn)）、Material（質(zhì)感）和普通（Universal），之前創(chuàng)建項(xiàng)目工程時(shí)選擇的是默認(rèn)樣式（圖22.3），可通過(guò)修改項(xiàng)目的qtquickcontrols2文件配置來(lái)更換樣式類型。qtquickcontrols2.conf文件內(nèi)容如下：;Thisfilecanbeeditedtochangethestyleoftheapplication;SeeStylingQtQuickControls2inthedocumentationfordetails:;http://doc.qt.io/qt-5/qtquickcontrols2-styles.html

[Controls]Style=Default

[Universal]Theme=Light;Accent=Steel

[Material]Theme=Light;Accent=BlueGrey;Primary=BlueGray2021/5/91322.1.2QtQuickControls2程序的構(gòu)成其中，加黑處即需要修改配置的地方。將其改為Material，運(yùn)行程序，看到質(zhì)感的界面如圖22.8所示；若改為Universal，則呈現(xiàn)的界面如圖22.9所示。

2021/5/91422.2QtQuickControls2與1的比較22.2.1ApplicationWindow結(jié)構(gòu)不同在QtQuickControls1中，主應(yīng)用窗口ApplicationWindow由菜單欄（MenuBar）、工具欄（ToolBar）、內(nèi)容顯示區(qū)（ContentArea）和底部狀態(tài)欄（StatusBar）等構(gòu)成，而QtQuickControls2的主應(yīng)用窗口結(jié)構(gòu)則要簡(jiǎn)單得多，它僅由頭部（Header）、內(nèi)容（Content）和尾部（Footer）三部分組成，兩者的區(qū)別如圖22.10所示。2021/5/91522.2.1ApplicationWindow結(jié)構(gòu)不同在QtQuickControls2中，一般聲明ApplicationWindow為整個(gè)應(yīng)用的根元素，其最簡(jiǎn)單的代碼形式如下：importQtQuick.Controls2.1ApplicationWindow{visible:trueheader:ToolBar{//...}footer:TabBar{//...}SwipeView{anchors.fill:parent//...}}2021/5/91622.2.1ApplicationWindow結(jié)構(gòu)不同1．ToolBar工具欄【例】（簡(jiǎn)單）（CH2201-a1）工具欄。ToolBar是應(yīng)用廣泛的上下文相關(guān)控件（如導(dǎo)航按鈕、搜索框等）的容器，其典型代碼。運(yùn)行效果如圖22.11所示。2021/5/91722.2.1ApplicationWindow結(jié)構(gòu)不同2．TabBar選項(xiàng)標(biāo)簽欄【例】（簡(jiǎn)單）（CH2201-a2）標(biāo)簽欄。QtQuickControls2使用TabBar/TabButton控件組合來(lái)實(shí)現(xiàn)頁(yè)面選項(xiàng)標(biāo)簽欄，以取代原QtQuickControls1中TabView/Tab組合的功能。代碼的形式如下：TabBar{ //...width:parent.widthTabButton{text:"FirstTab" //...}TabButton{text:"SecondTab" //...}TabButton{text:"ThirdTab" //...}}2021/5/91822.2.1ApplicationWindow結(jié)構(gòu)不同一旦所有選項(xiàng)標(biāo)簽的寬度和加起來(lái)超過(guò)了屏幕寬度，標(biāo)簽欄就會(huì)自適應(yīng)調(diào)整為可滑動(dòng)切換狀態(tài)，代碼如下。ApplicationWindow{visible:truewidth:240height:480title:qsTr("標(biāo)簽欄")

header:TabBar{id:barwidth:parent.width

Repeater{model:["第一頁(yè)","第二頁(yè)","第三頁(yè)","第四頁(yè)","第五頁(yè)"]

TabButton{text:modelDatawidth:Math.max(100,bar.width/5)}}}}2021/5/91922.2.1ApplicationWindow結(jié)構(gòu)不同運(yùn)行效果如圖22.12所示。2021/5/92022.2.2Menu不支持窗口主菜單【例】（簡(jiǎn)單）（CH2201-a1續(xù)）一個(gè)典型的工具欄彈出式菜單的例子。代碼如下。運(yùn)行程序，單擊工具欄上右側(cè)的

按鈕，彈出菜單如圖22.13所示。2021/5/92122.2.3控件實(shí)現(xiàn)差異1．ButtonGroup取代ExclusiveGroup組框在原QtQuickControls1中，成組的選項(xiàng)按鈕由ExclusiveGroup組織在一起，例如21.2.2“學(xué)生信息表單”實(shí)例（實(shí)例文件CH2102）中，有如下代碼：GroupBox{ /*組框*/id:group1title:qsTr("性別")Layout.fillWidth:trueRowLayout{ ExclusiveGroup{id:sexGroup} /*互斥選項(xiàng)組*/RadioButton{ /*單選按鈕*/text:qsTr("男")checked:trueexclusiveGroup:sexGroupLayout.minimumWidth:65 //設(shè)置控件所占最小寬度為65}RadioButton{text:qsTr("女")exclusiveGroup:sexGroupLayout.minimumWidth:65}}}2021/5/92222.2.3控件實(shí)現(xiàn)差異這段代碼實(shí)現(xiàn)了“性別”單選按鈕組，而在QtQuickControls2中，單選按鈕組改由ButtonGroup組織，如下：GroupBox{ /*組框*/id:group1title:qsTr("性別")Layout.fillWidth:trueRowLayout{ ButtonGroup{id:sexGroup} /*互斥選項(xiàng)組*/RadioButton{ /*單選按鈕*/text:qsTr("男")checked:trueButtonGroup.group:sexGroupLayout.minimumWidth:65 //設(shè)置控件所占最小寬度為65}RadioButton{text:qsTr("女")ButtonGroup.group:sexGroupLayout.minimumWidth:65}}}2021/5/92322.2.3控件實(shí)現(xiàn)差異2．TextArea滾動(dòng)條實(shí)現(xiàn)方式不一樣在QtQuickControls1中，TextArea組件繼承自ScrollView，因此始終自帶滾動(dòng)條；而在QtQuickControls2中，TextArea只是個(gè)簡(jiǎn)單的多行文本編輯器，可選擇性地綁定到滑動(dòng)頁(yè)組件以提供滾動(dòng)條功能。這樣就可以在帶滾動(dòng)條的頁(yè)面上使用TextArea而不會(huì)出現(xiàn)雙重滾動(dòng)區(qū)域嵌套的情形，從而避免了不確定性和由此帶來(lái)的可用性問(wèn)題。將TextArea綁定到一個(gè)滑動(dòng)頁(yè)組件的典型代碼如下：Flickable{id:flickableanchors.fill:parent

TextArea.flickable:TextArea{text:"TextArea\n...\n...\n...\n...\n...\n...\n"wrapMode:TextArea.Wrap}

ScrollBar.vertical:ScrollBar{}}2021/5/92422.2.3控件實(shí)現(xiàn)差異3．新增Tumbler翻選框控件【例】（簡(jiǎn)單）（CH2201-a3）翻選框控件使用。實(shí)現(xiàn)步驟如下。（1）新建QtQuickControls2應(yīng)用程序，項(xiàng)目名稱為“TumblerDialog”。（2）打開(kāi)main.qml文件，修改代碼如下：程序運(yùn)行效果如圖22.14所示。2021/5/92522.2.3控件實(shí)現(xiàn)差異4．一些界面控件顯示風(fēng)格的差異【例】（簡(jiǎn)單）（CH2201-a4）部分控件對(duì)比顯示效果。創(chuàng)建一個(gè)QtQuickControls2應(yīng)用程序，打開(kāi)main.qml文件，編寫(xiě)代碼如下：運(yùn)行程序，效果如圖22.15所示。2021/5/92622.3滑動(dòng)翻頁(yè)及隱藏面板【例】（難度中等）（CH2202）制作一個(gè)藝術(shù)品欣賞程序，采用多頁(yè)面，每一頁(yè)顯示一幅藝術(shù)品圖片，以及品名、作者、創(chuàng)作年代信息，單擊界面下方的滑動(dòng)點(diǎn)來(lái)切換頁(yè)面，如圖22.16所示。2021/5/92722.3滑動(dòng)翻頁(yè)及隱藏面板每件藝術(shù)品還附帶有詳細(xì)的介紹信息，在界面右側(cè)的隱藏面板內(nèi)，用戶可隨時(shí)拉出來(lái)查看，運(yùn)行效果如圖22.17所示。2021/5/92822.3滑動(dòng)翻頁(yè)及隱藏面板實(shí)現(xiàn)步驟如下。（1）新建QtQuickControls2應(yīng)用程序，項(xiàng)目名稱為“ArtView”。（2）在項(xiàng)目工程目錄中建一個(gè)images文件夾，其中放入本例要用到的三張圖片，文件名為“蒙娜麗莎.jpg”、“大衛(wèi).jpg”、“圣母.jpg”。（3）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加現(xiàn)有文件…”項(xiàng)，從彈出對(duì)話框中選擇這些圖片打開(kāi)，將它們加載到項(xiàng)目中。（4）雙擊項(xiàng)目視圖打開(kāi)Page1Form.ui.qml文件，編寫(xiě)代碼。（5）打開(kāi)Page1.qml文件，編寫(xiě)代碼。（6）打開(kāi)main.qml文件，修改代碼。2021/5/92922.4選項(xiàng)列表【例】（難度中等）（CH2203）實(shí)現(xiàn)一個(gè)圖書(shū)選擇瀏覽程序，采用選項(xiàng)列表的形式，界面左邊是所有書(shū)名的列表，用戶選中的項(xiàng)以淡灰色背景突出顯示，同時(shí)在右邊圖片框中顯示對(duì)應(yīng)該書(shū)的封面圖片，運(yùn)行效果如圖22.18所示。2021/5/93022.4選項(xiàng)列表實(shí)現(xiàn)步驟如下。（1）新建QtQuickControls2應(yīng)用程序，項(xiàng)目名稱為“BookView”。（2）在項(xiàng)目工程目錄中建一個(gè)images文件夾，其中放入本例要用到的所有圖書(shū)的封