QT5開(kāi)發(fā)及實(shí)例（第5版）第21章QtQuickControls開(kāi)發(fā)基礎(chǔ)——QtQuickControls概述01第一個(gè)QtQuickControls程序第一個(gè)QtQuickControls程序【例】（簡(jiǎn)單）（CH2101）嘗試開(kāi)發(fā)第一個(gè)QtQuickControls程序，運(yùn)行界面如圖?？梢灾苯釉赒ML應(yīng)用程序中通過(guò)導(dǎo)入庫(kù)來(lái)開(kāi)發(fā)QtQuickControls程序，步驟如下。（1）創(chuàng)建QML項(xiàng)目，選擇項(xiàng)目“Application(Qt)”下的“QtQuickApplication”模板，具體操作詳見(jiàn)前QML編程基礎(chǔ)章。項(xiàng)目名稱為“QControlDemo”。（2）打開(kāi)項(xiàng)目主程序文件main.qml，編寫代碼。（3）單擊按鈕運(yùn)行項(xiàng)目，在上面一行文本框內(nèi)輸入“美好的世界”，單擊“點(diǎn)我”按鈕，下一行文本框顯示“Hello美好的世界！”。02更換界面主題樣式更換界面主題樣式QtQuickControls支持多種類型的界面主題樣式：Default（默認(rèn)）、Material（質(zhì)感）、Universal（普通）、Fusion（融合）和Imagine（想象），可通過(guò)配置qtquickcontrols2文件來(lái)更換樣式類型。（1）在項(xiàng)目工程目錄中創(chuàng)建qtquickcontrols2.conf配置文件。（2）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加現(xiàn)有文件…”項(xiàng)，從彈出的對(duì)話框中選擇該文件并打開(kāi)，將其加載到項(xiàng)目中。（3）打開(kāi)qtquickcontrols2.conf文件，編寫內(nèi)容如下：;Thisfilecanbeeditedtochangethestyleoftheapplication;Read"QtQuickControls2ConfigurationFile"fordetails:;https://doc.qt.io/qt/qtquickcontrols2-configuration.html

[Controls]Style=Default

[Material]Theme=Light;Accent=BlueGrey;Primary=BlueGray;Foreground=Brown;Background=Grey更換界面主題樣式其中，通過(guò)修改加黑處的配置來(lái)指定界面主題的樣式類型。將其改為Material，運(yùn)行程序，看到的界面如圖；更換界面主題樣式若改為Imagine，則呈現(xiàn)的效果如圖21.3所示。QT5開(kāi)發(fā)及實(shí)例（第5版）第21章QtQuickControls開(kāi)發(fā)基礎(chǔ)——QtQuick控件01概

述概

述QtQuickControls模塊提供一個(gè)控件的集合供用戶開(kāi)發(fā)圖形化界面使用，所有的QtQuick控件、可視外觀效果和功能描述見(jiàn)表?？?/p>

件名

稱可視外觀效果功能描述Button命令按鈕單擊執(zhí)行操作CheckBox復(fù)選框可同時(shí)選中多個(gè)選項(xiàng)ComboBox組合框提供下拉列表選項(xiàng)GroupBox組框用于定義控件組的容器Label標(biāo)簽界面文字提示RadioButton單選按鈕單擊選中，通常分組使用，只能選其中一個(gè)選項(xiàng)

TextArea文本區(qū)用于顯示多行可編輯的格式化文本概

述續(xù)表TextField文本框可供輸入（顯示）一行純文本BusyIndicator忙指示器用以表明程序正在執(zhí)行某項(xiàng)操作（如載入圖片），請(qǐng)用戶耐心等待Tumbler翻選框提供滾輪條給用戶上下翻動(dòng)以選擇合適的值ProgressBar進(jìn)度條動(dòng)態(tài)顯示程序執(zhí)行進(jìn)度Slider滑動(dòng)條提供水平或垂直方向的滑塊，鼠標(biāo)拖動(dòng)可設(shè)置參數(shù)SpinBox數(shù)值旋轉(zhuǎn)框單擊上下箭頭可設(shè)置數(shù)值參數(shù)Switch開(kāi)關(guān)控制某項(xiàng)功能的開(kāi)啟/關(guān)閉，常見(jiàn)于移動(dòng)智能手機(jī)的應(yīng)用界面02基本控件基本控件【例】（難度中等）（CH2102）用基本控件制作“學(xué)生信息表單”，輸入（選擇）學(xué)生各項(xiàng)信息后單擊“提交”按鈕，在文本區(qū)顯示出該學(xué)生的信息，運(yùn)行效果如圖。實(shí)現(xiàn)步驟如下。（1）創(chuàng)建QML項(xiàng)目，選擇項(xiàng)目“Application(Qt)”下的“QtQuickApplication”模板。項(xiàng)目名稱為“StuForm”。（2）打開(kāi)項(xiàng)目主程序文件main.qml，編寫代碼。03高級(jí)控件高級(jí)控件【例】（較難）（CH2103）用高級(jí)控件制作一個(gè)有趣的小程序，界面如圖。高級(jí)控件程序運(yùn)行后，窗體上顯出一幅唯美的海底美人魚照片。用戶可用鼠標(biāo)拖動(dòng)左下方滑塊來(lái)調(diào)整畫面尺寸，當(dāng)畫面縮小到一定程度后，界面上會(huì)出現(xiàn)一個(gè)“忙等待”的動(dòng)畫圖標(biāo)，如圖；高級(jí)控件還可以通過(guò)日期翻選框設(shè)置美人魚的生日，點(diǎn)“OK”按鈕，程序同步計(jì)算并顯示出她的芳齡，如圖。高級(jí)控件實(shí)現(xiàn)步驟如下。（1）創(chuàng)建QML項(xiàng)目，選擇項(xiàng)目“Application(Qt)”下的“QtQuickApplication”模板。項(xiàng)目名稱為“Mermaid”。（2）在項(xiàng)目工程目錄中建一個(gè)images文件夾，其中放入一張圖片，文件名為“Mermaid.jpg”。（3）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加現(xiàn)有文件…”項(xiàng)，從彈出的對(duì)話框中選擇該圖片打開(kāi)，將其加載到項(xiàng)目中。（4）打開(kāi)項(xiàng)目主程序文件main.qml，編寫代碼。04樣式定制樣式定制凡是對(duì)應(yīng)有樣式類的QtQuick控件都可以由用戶自定義其外觀，表給出了各QtQuick控件所對(duì)應(yīng)的樣式類?？?/p>

件名

稱對(duì)應(yīng)樣式類Button命令按鈕ButtonStyleCheckBox復(fù)選框CheckBoxStyleComboBox組合框ComboBoxStyleRadioButton單選按鈕RadioButtonStyle

TextArea文本區(qū)TextAreaStyleTextField文本框TextFieldStyleBusyIndicator忙指示器BusyIndicatorStyleProgressBar進(jìn)度條ProgressBarStyleSlider滑動(dòng)條SliderStyleSpinBox數(shù)值旋轉(zhuǎn)框SpinBoxStyleSwitch開(kāi)關(guān)SwitchStyle樣式定制定制控件的樣式有以下兩種方法。（1）使用樣式屬性所有可定制的QtQuick控件都有一個(gè)style屬性，將其值設(shè)為該控件對(duì)應(yīng)的樣式類，然后在樣式類中定義樣式，代碼形如：Control{ //控件名 ... //其他屬性及值style:ControlStyle{ //樣式屬性 ... //自定義樣式的代碼} ...}樣式定制（2）定義樣式代理樣式代理是一種由用戶定義的屬性類組件，其代碼形如：propertyComponentdelegateName:ControlStyle{ //樣式代理 ... //自定義樣式的代碼}其中，delegateName為樣式代理的名稱，經(jīng)這樣定義了之后，就可以在控件代碼中直接引用該名稱來(lái)指定控件的樣式，如下：Control{ //控件名 ...style:delegateName //通過(guò)樣式代理名指定樣式 ...}樣式定制【例】（較難）（CH2104）用上述兩種方法分別定制幾種控件的樣式，界面對(duì)比如圖，其中左邊一列為控件的標(biāo)準(zhǔn)外觀，中間為用樣式屬性直接定義的外觀，右邊則是應(yīng)用了樣式代理后的效果。樣式定制實(shí)現(xiàn)步驟如下。（1）創(chuàng)建QML項(xiàng)目，選擇項(xiàng)目“Application(Qt)”下的“QtQuickApplication”模板。項(xiàng)目名稱為“Styles”。（2）在項(xiàng)目工程目錄中建一個(gè)images文件夾，其中放入一些圖片作為定制控件的資源，如圖。樣式定制（3）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加現(xiàn)有文件…”項(xiàng)，從彈出的對(duì)話框中選中這些圖片打開(kāi)，將它們加載到項(xiàng)目中。（4）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加新文件…”項(xiàng)，新建MainForm.qml文件，編寫代碼。（5）打開(kāi)main.qml文件，編寫代碼如下：importQtQuick2.15importQtQuick.Window2.15

Window{width:600height:240visible:truetitle:qsTr("樣式定制")

MainForm{anchors.fill:parent}}QT5開(kāi)發(fā)及實(shí)例（第5版）第21章QtQuickControls開(kāi)發(fā)基礎(chǔ)——QtQuick對(duì)話框QtQuick對(duì)話框【例】（難度中等）（CH2105）演示幾種QtQuick對(duì)話框的用法，運(yùn)行效果如圖。QtQuick對(duì)話框?qū)崿F(xiàn)步驟如下。（1）創(chuàng)建QML項(xiàng)目，選擇項(xiàng)目“Application(Qt)”下的“QtQuickApplication”模板。項(xiàng)目名稱為“Dialogs”。（2）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加新文件…”項(xiàng)，新建MainForm.qml文件，編寫代碼。QT5開(kāi)發(fā)及實(shí)例（第5版）第21章QtQuickControls開(kāi)發(fā)基礎(chǔ)——QtQuick選項(xiàng)標(biāo)簽QtQuick選項(xiàng)標(biāo)簽【例】（較難）（CH2106）用選項(xiàng)標(biāo)簽結(jié)合多種視圖組合展示“文藝復(fù)興三杰”的代表作，界面如圖。QtQuick選項(xiàng)標(biāo)簽程序整個(gè)窗體界面分左、中、右三個(gè)區(qū)域。左邊區(qū)給出作品及藝術(shù)家的信息列表；中區(qū)由多個(gè)選項(xiàng)頁(yè)組成的相框展示整體作品；右邊區(qū)的圖片框則帶有滾動(dòng)條，用戶可拖動(dòng)以進(jìn)一步觀賞作品的某個(gè)細(xì)節(jié)部分。用戶可以用兩種方式更改視圖以欣賞不同作者的作品：一種是用鼠標(biāo)點(diǎn)選左邊區(qū)不同的列表項(xiàng)；另一種就是切換中間相框頂部的選項(xiàng)標(biāo)簽，操作如圖。QtQuick選項(xiàng)標(biāo)簽實(shí)現(xiàn)步驟如下。（1