Qt 5 開發(fā)及實(shí)例（第5版） 課件 第19章 QML編程基礎(chǔ)

QT5開發(fā)及實(shí)例（第5版）第19章QML編程基礎(chǔ)——QML概述QML概述QML是通過QtQML引擎在程序運(yùn)行時(shí)解析并運(yùn)行的。Qt5.15更高性能的編譯器通道意味著使用QML編寫的程序啟動(dòng)時(shí)及運(yùn)行時(shí)速度更快、效率更高。QML新、舊編譯器通道如圖。（a）QML舊編譯器通道（b）QML新編譯器通道01第一個(gè)QML程序1．創(chuàng)建QML項(xiàng)目2．編寫QML程序第一個(gè)QML程序【例】（簡(jiǎn)單）（CH1901）這里先從一個(gè)最簡(jiǎn)單的QML程序入手，介紹QML的基本概念。1．創(chuàng)建QML項(xiàng)目創(chuàng)建QML項(xiàng)目的步驟如下。（1）啟動(dòng)QtCreator，單擊主菜單“文件”→“NewProject…”項(xiàng)，彈出“NewProject”對(duì)話框，如圖，選擇項(xiàng)目“Application(Qt)”下的“QtQuickApplication”模板。第一個(gè)QML程序（2）單擊“選擇…”按鈕，在“QtQuickApplication”對(duì)話框的“ProjectLocation”頁輸入項(xiàng)目名稱“QmlDemo”，并選擇保存項(xiàng)目的路徑，如圖。第一個(gè)QML程序（3）單擊“下一步”按鈕，在“DefineBuildSystem”頁選擇編譯器為“qmake”，如圖。第一個(gè)QML程序（4）單擊“下一步”按鈕，在“DefineProjectDetails”頁選擇最低適應(yīng)的Qt版本為“Qt5.15”，如圖。第一個(gè)QML程序（5）連續(xù)兩次單擊“下一步”按鈕，在“KitSelection”頁選擇自己項(xiàng)目的構(gòu)建套件（編譯器和調(diào)試器），如圖，這里勾選“DesktopQt5.15.2MinGW64-bit”，單擊“下一步”按鈕。第一個(gè)QML程序（6）在“ProjectManagement”頁上自動(dòng)匯總出要添加到該項(xiàng)目的文件，如圖，單擊“完成”按鈕完成QML項(xiàng)目的創(chuàng)建。第一個(gè)QML程序此時(shí)，系統(tǒng)自動(dòng)生成了一個(gè)空的QML窗體代碼框架，位于項(xiàng)目啟動(dòng)的主程序文件main.qml中，如下：importQtQuick2.15importQtQuick.Window2.15

Window{width:640height:480visible:truetitle:qsTr("HelloWorld")}單擊按鈕運(yùn)行項(xiàng)目，彈出空白的“HelloWorld”窗口。第一個(gè)QML程序2．編寫QML程序在窗口的上部放一個(gè)文本輸入框（默認(rèn)顯示“Entersometext...”），在框中輸入“HelloWorld!”后用鼠標(biāo)單擊該框外窗口內(nèi)的任意位置，于開發(fā)環(huán)境底部“應(yīng)用程序輸出”子窗口中輸出一行文本“qml:Clickedonbackground.Text:"HelloWorld!"”，整個(gè)過程如圖。在main.qml中編寫（就著原來的框架寫）代碼。02QML文檔構(gòu)成1．import部分2．對(duì)象聲明3．對(duì)象和屬性4．對(duì)象標(biāo)識(shí)符5．注釋QML文檔構(gòu)成1．import部分此部分導(dǎo)入需要使用的QtQuick庫，這些庫由Qt5.15提供，包含了用戶界面最通用的類和功能，如本程序main.qml文件開頭的兩句：importQtQuick2.15 //導(dǎo)入QtQuick2.15庫importQtQuick.Window2.15 //導(dǎo)入QtQuick窗體庫導(dǎo)入這些庫后，用戶就可以在自己編寫的程序中訪問QtQuick所有的QML類型、接口和功能。2．對(duì)象聲明這是一個(gè)QML程序代碼的主體部分，它以層次化的結(jié)構(gòu)定義了可視場(chǎng)景中將要顯示的元素，如矩形、圖像、文本及獲取用戶輸入的對(duì)象……它們都是QtQuick為用戶界面開發(fā)提供的基本構(gòu)件。例如，main.qml的對(duì)象聲明部分：Window{ //根對(duì)象width:640height:480visible:truetitle:qsTr("HelloWorld")

Rectangle{ //對(duì)象 ...}}QML文檔構(gòu)成3．對(duì)象和屬性對(duì)象可以嵌套，即一個(gè)QML對(duì)象可以沒有、也可以有一個(gè)或多個(gè)子對(duì)象，如上面Window中聲明的Rectangle（矩形）對(duì)象就有兩個(gè)子對(duì)象（MouseArea和TextEdit），而子對(duì)象TextEdit本身又擁有一個(gè)子對(duì)象Rectangle，如下：Rectangle{ //對(duì)象：Rectangle ...MouseArea{ //子對(duì)象1：MouseArea ...}TextEdit{ //子對(duì)象2：TextEdit ...Rectangle{ //子對(duì)象2的子對(duì)象：Rectangle ...}}}QML文檔構(gòu)成對(duì)象由它們的類型指定，以大寫字母開頭，后面跟一對(duì)大括號(hào){}，{}之中是該對(duì)象的屬性，屬性以鍵值對(duì)“屬性名:值”的形式給出，比如在代碼中：Rectangle{width:360 //屬性（寬度）height:360 //屬性（高度） ...}定義了一個(gè)寬度和高度都是360像素的矩形。QML允許將多個(gè)屬性寫在一行，但它們之間必須用分號(hào)隔開，所以以上代碼也可以寫為：Rectangle{width:360;height:360 //屬性（寬度和高度） ...}QML文檔構(gòu)成對(duì)象MouseArea是可以響應(yīng)鼠標(biāo)事件的區(qū)域：MouseArea{id:mouseAreaanchors.fill:parentonClicked:{console.log(qsTr('Clickedonbackground.Text:"'+textEdit.text+'"'))}}作為子對(duì)象，它可以使用parent關(guān)鍵字訪問其父對(duì)象Rectangle。其屬性anchors.fill起到布局作用，它會(huì)使MouseArea充滿一個(gè)對(duì)象的內(nèi)部，這里設(shè)值為parent表示MouseArea充滿整個(gè)矩形，即整個(gè)窗口內(nèi)部都是鼠標(biāo)響應(yīng)區(qū)。QML文檔構(gòu)成TextEdit是一個(gè)文本編輯對(duì)象：TextEdit{id:textEdittext:qsTr("Entersometext...")verticalAlignment:Text.AlignVCenteranchors.top:parent.topanchors.horizontalCenter:parent.horizontalCenteranchors.topMargin:20Rectangle{anchors.fill:parentanchors.margins:-10color:"transparent"border.width:1}}QML文檔構(gòu)成4．對(duì)象標(biāo)識(shí)符每個(gè)對(duì)象都可以指定一個(gè)唯一的id值，這樣便可以在其他對(duì)象中識(shí)別并引用該對(duì)象。例如在本例代碼中：MouseArea{id:mouseArea ...}5．注釋QML文檔的注釋同C/C++、JavaScript代碼的注釋一樣：（1）單行注釋使用“//”開始，在行的末尾結(jié)束。（2）多行注釋使用“/*”開始，使用“*/”結(jié)尾。QT5開發(fā)及實(shí)例（第5版）第19章QML編程基礎(chǔ)——QML可視元素01矩形元素：Rectangle矩形元素：Rectangle【例】（簡(jiǎn)單）（CH1902）在窗口中繪制矩形，運(yùn)行效果如圖。具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Rectangle”。（2）在main.qml文件中編寫代碼。02圖像元素：Image圖像元素：Image【例】（簡(jiǎn)單）（CH1903）將一張較大的風(fēng)景圖片適當(dāng)?shù)乜s小后顯示在窗體中，運(yùn)行效果如圖19.10所示。具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Image”。（2）在項(xiàng)目工程目錄中建一個(gè)images文件夾，其中放入一張圖片，該圖片是用數(shù)碼相機(jī)拍攝（尺寸為980像素×751像素）的，文件名為“tianchi.jpg”（長(zhǎng)白山天池）。（3）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加現(xiàn)有文件…”項(xiàng)，從彈出的對(duì)話框中選擇事先準(zhǔn)備的“tianchi.jpg”文件并打開，如圖所示，將其加載到項(xiàng)目中。

圖像元素：Image（4）打開main.qml文件，編寫代碼如下：importQtQuick2.15importQtQuick.Window2.15

Window{width:285height:225visible:truetitle:qsTr("Image")

Rectangle{width:360height:360anchors.fill:parentImage{//圖片在窗口中的位置坐標(biāo)x:20y:20//寬和高均為原圖的1/4width:980/4;height:751/4 //(a)source:"images/tianchi.jpg" //圖片路徑URLfillMode:Image.PreserveAspectCrop //(b)clip:true //避免所要渲染的圖片超出元素范圍}}}03文本元素：Text文本元素：Text【例】（簡(jiǎn)單）（CH1904）各種典型文字效果的演示，運(yùn)行效果如圖。具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Text”。（2）打開main.qml文件，編寫代碼。04自定義元素（組件）自定義元素（組件）【例】（難度一般）（CH1905）自定義創(chuàng)建一個(gè)Button組件并在主窗口中使用它，運(yùn)行效果如圖。自定義元素（組件）具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Custom”。（2）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加新文件…”項(xiàng)，彈出“新建文件”對(duì)話框，如圖所示，選擇文件和類“Qt”下的“QMLFile(QtQuick2)”模板。自定義元素（組件）（3）單擊“選擇…”按鈕，在“Location”頁輸入文件名“Button”，并選擇保存路徑（本項(xiàng)目文件夾下），如圖。自定義元素（組件）（4）打開Button.qml文件，編寫代碼如下：importQtQuick2.15Rectangle{ //將Rectangle自定義成按鈕id:btnwidth:100;height:62 //按鈕的尺寸color:"teal" //按鈕顏色border.color:"aqua" //按鈕邊界色border.width:3 //按鈕邊界寬度Text{ //Text元素作為按鈕文本id:labelanchors.centerIn:parentfont.pointSize:16text:"開始"}MouseArea{ //MouseArea對(duì)象作為按鈕單擊事件響應(yīng)區(qū)anchors.fill:parentonClicked:{ //響應(yīng)單擊事件代碼label.text="按鈕已按下！"label.font.pointSize=9 //改變按鈕文本和字號(hào)btn.color="aqua" //改變按鈕顏色btn.border.color="teal“ //改變按鈕邊界色}}}自定義元素（組件）（5）打開main.qml文件，編寫代碼如下：importQtQuick2.15importQtQuick.Window2.15

Window{width:320height:240visible:truetitle:qsTr("Custom")

Rectangle{width:360height:360anchors.fill:parent

Button{ //復(fù)用Button組件x:25;y:25}}}QT5開發(fā)及實(shí)例（第5版）第19章QML編程基礎(chǔ)——QML元素布局01定位器：Positioner1．行列、網(wǎng)格定位2．流定位（Flow）3．重復(fù)器（Repeater）定位器：Positioner1．行列、網(wǎng)格定位【例】（簡(jiǎn)單）（CH1906）行列和網(wǎng)格定位分別使用Row、Column和Grid元素，運(yùn)行效果如圖。定位器：Positioner具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Positioner”。（2）按19.2.4節(jié)介紹的方法定義紅、綠、藍(lán)三個(gè)矩形組件，代碼分別如下：/*紅色矩形，源文件RedRectangle.qml*/importQtQuick2.15Rectangle{width:64 //寬度height:32 //高度color:"red" //顏色border.color:Qt.lighter(color) //邊框色設(shè)置比填充色淺（默認(rèn)是50%）}/*綠色矩形，源文件GreenRectangle.qml*/importQtQuick2.15Rectangle{width:48height:62color:"green"border.color:Qt.lighter(color)}/*藍(lán)色矩形，源文件BlueRectangle.qml*/importQtQuick2.15Rectangle{width:80height:50color:"blue"border.color:Qt.lighter(color)}（3）打開main.qml文件，編寫代碼。定位器：Positioner2．流定位（Flow）【例】（簡(jiǎn)單）（CH1906續(xù)）流定位使用Flow元素，運(yùn)行效果如圖。定位器：Positioner具體實(shí)現(xiàn)步驟如下。（1）仍然使用上例的項(xiàng)目“Positioner”，在其基礎(chǔ)上修改。（2）打開main.qml文件，修改代碼如下：importQtQuick2.15importQtQuick.Window2.15

Window{width:150height:200visible:truetitle:qsTr("Positioner")

Rectangle{width:150 //(a)height:200 //(a)anchors.fill:parent

Flow{ //(b)anchors.fill:parentanchors.margins:15 //元素與窗口左上角邊距為15像素spacing:5//以下添加被Flow定位的元素成員RedRectangle{}BlueRectangle{}GreenRectangle{}}}}定位器：Positioner3．重復(fù)器（Repeater）重復(fù)器用于創(chuàng)建大量相似的元素成員，常與其他定位器結(jié)合起來使用。【例】（簡(jiǎn)單）（CH1907）Repeater結(jié)合Grid來排列一組矩形元素，運(yùn)行效果如圖。具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Repeater”。（2）打開main.qml文件，編寫代碼。02錨：Anchor錨：AnchorQML還提供了一種使用Anchor（錨）來進(jìn)行元素布局的方法。每個(gè)元素都可被認(rèn)為有一組無形的“錨線”：left、horizontalCenter、right、top、verticalCenter和bottom，如圖，Text元素還有一個(gè)baseline錨線（對(duì)于沒有文本的元素，它與top相同）。錨系統(tǒng)還允許為一個(gè)元素的錨指定邊距（margin）和偏移（offset）。邊距指定了元素錨到外邊界的空間量，而偏移允許使用中心錨線來定位。一個(gè)元素可以通過leftMargin、rightMargin、topMargin和bottomMargin來獨(dú)立地指定錨邊距，如圖，也可以使用anchor.margins來為所有的4個(gè)錨指定相同的邊距。錨：Anchor【例】（難度一般）（CH1908）使用Anchor布局一組矩形元素，并測(cè)試錨的特性，布局運(yùn)行效果如圖。錨：Anchor具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Anchor”。（2）本項(xiàng)目需要復(fù)用之前已開發(fā)的組件。將前面實(shí)例CH1905和CH1906中的源文件Button.qml、RedRectangle.qml、GreenRectangle.qml及BlueRectangle.qml復(fù)制到本項(xiàng)目目錄下。右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加現(xiàn)有文件…”項(xiàng)，彈出“添加現(xiàn)有文件”對(duì)話框，如圖。（3）打開main.qml文件，編寫代碼。（4）打開Button.qml文件，修改代碼。QT5開發(fā)及實(shí)例（第5版）第19章QML編程基礎(chǔ)——QML事件處理01鼠標(biāo)事件鼠標(biāo)事件【例】（難度一般）（CH1909）使用MouseArea接受和響應(yīng)鼠標(biāo)單擊、拖曳等事件，運(yùn)行效果如圖。具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“MouseArea”。（2）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加新文件…”項(xiàng)，新建Rect.qml文件，編寫代碼。鼠標(biāo)事件（3）打開main.qml文件，編寫代碼如下：importQtQuick2.15importQtQuick.Window2.15

Window{width:390height:100visible:truetitle:qsTr("MouseArea")

Rectangle{width:360height:360anchors.fill:parent

Rect{ //復(fù)用定義好的矩形元素x:25;y:25 //初始坐標(biāo)opacity:(360.0-x)/360 //透明度設(shè)置}}}02鼠標(biāo)事件鍵盤事件【例】（難度一般）（CH1910）利用鍵盤事件處理制作一個(gè)模擬桌面應(yīng)用圖標(biāo)選擇程序，運(yùn)行效果如圖，按Tab鍵切換選項(xiàng)，當(dāng)前選中的圖標(biāo)以彩色放大顯示，還可以用←、↑、↓、→方向鍵移動(dòng)圖標(biāo)位置。具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Keyboard”。（2）打開main.qml文件，編寫代碼。03輸入控件與焦點(diǎn)輸入控件與焦點(diǎn)【例】（難度中等）（CH1911）用QML輸入元素定制文本框，可用Tab鍵控制其焦點(diǎn)轉(zhuǎn)移，運(yùn)行效果如圖。具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“TextInput”。（2）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加新文件…”項(xiàng)，新建TextBox.qml文件，編寫代碼。（3）打開main.qml文件，編寫代碼。QT5開發(fā)及實(shí)例（第5版）第19章QML編程基礎(chǔ)——QML集成JavaScript01調(diào)用JavaScript函數(shù)調(diào)用JavaScript函數(shù)【例】（難度一般）（CH1912）編寫JavaScript函數(shù)實(shí)現(xiàn)圖形的旋轉(zhuǎn)，每單擊一次鼠標(biāo)，矩形就轉(zhuǎn)動(dòng)一個(gè)隨機(jī)的角度，運(yùn)行效果如圖。具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“JavaScript”。（2）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加新文件…”項(xiàng)，新建RotateRect.qml文件，編寫代碼。調(diào)用JavaScript函數(shù)（3）打開main.qml文件，編寫代碼如下：importQtQuick2.15importQtQuick.Window2.15

Window{width:160height:160visible:truetitle:qsTr("JavaScript")

Rectangle{width:360height:360anchors.fill:parent

TextEdit{id:textEditvisible:false}RotateRect{ //直接使用RotateRect組件x:50;y:50}}}02導(dǎo)入JS文件導(dǎo)入JS文件【例】（難度一般）（CH1913）往QML源文件中導(dǎo)入使用外部JS文件來實(shí)現(xiàn)圖形旋轉(zhuǎn)。具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“JSFile”。（2）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加新文件…”