qt5開發(fā)及實(shí)例第19章qml編程基礎(chǔ)

第19章QML編程基礎(chǔ)19.1QML概述19.2QML可視元素19.3QML元素布局19.4QML事件處理19.5QML集成JavaScript19.1QML概述19.1.1第一個(gè)QML程序【例】（簡(jiǎn)單）（CH1901）這里先由一個(gè)最簡(jiǎn)單的QML程序入手，介紹QML的基本概念。創(chuàng)建QML應(yīng)用程序，步驟如下。（1）啟動(dòng)QtCreator，單擊主菜單“文件”→“新建文件或項(xiàng)目…”項(xiàng)，彈出“NewFileorProject”對(duì)話框，如圖19.1所示，選擇項(xiàng)目“Application”下的“QtQuickApplication”模板。19.1.1第一個(gè)QML程序（2）單擊“Choose…”按鈕，在“QtQuickApplication”對(duì)話框的“ProjectLocation”頁(yè)輸入項(xiàng)目名稱“QmlDemo”，并選擇保存項(xiàng)目的路徑，如圖19.2所示。19.1.1第一個(gè)QML程序（3）單擊“下一步”按鈕，在“DefineProjectDetails”頁(yè)選擇“Qt5.7”，如圖19.3所示。

19.1.1第一個(gè)QML程序（4）單擊“下一步”按鈕，在“KitSelection”頁(yè)，系統(tǒng)默認(rèn)已指定程序的編譯器和調(diào)試器，如圖19.4所示。19.1.1第一個(gè)QML程序（5）在“ProjectManagement”頁(yè)上自動(dòng)匯總出要添加到該項(xiàng)目的文件，如圖19.5所示。19.1.1第一個(gè)QML程序此時(shí)，系統(tǒng)自動(dòng)將這些文件組織起來生成項(xiàng)目工程，并預(yù)生成了一個(gè)QML代碼的框架，其中main.qml為項(xiàng)目啟動(dòng)的主程序文件，代碼如下：importQtQuick2.7importQtQuick.Window2.2Window{visible:truewidth:640height:480title:qsTr("HelloWorld")MainForm{anchors.fill:parentmouseArea.onClicked:{console.log(qsTr('Clickedonbackground.Text:"'+textEdit.text+'"'))}}}19.1.1第一個(gè)QML程序單擊

運(yùn)行程序，彈出“HelloWorld”窗口，窗口的上部有一文本輸入框（默認(rèn)顯示“Entersometext...”），在其中輸入“HelloWorld!”后用鼠標(biāo)單擊文本框外窗口內(nèi)的任意位置，可以看到開發(fā)環(huán)境底部“應(yīng)用程序輸出”子窗口中輸出一行文本“qml:Clickedonbackground.Text:"HelloWorld!"”，整個(gè)過程如圖19.6所示。19.1.2QML文檔構(gòu)成

import部分此部分導(dǎo)入需要使用的QtQuick庫(kù)，這些庫(kù)由Qt5提供，包含了用戶界面最通用的類和功能，如本程序main.qml文件開頭的兩句：importQtQuick2.7 //導(dǎo)入QtQuick2.7庫(kù)importQtQuick.Window2.2 //導(dǎo)入QtQuick窗體庫(kù)導(dǎo)入這些庫(kù)后，用戶就可以在自己編寫的程序中訪問QtQuick所有的QML類型、接口和功能。19.1.2QML文檔構(gòu)成

對(duì)象聲明這是一個(gè)QML程序代碼的主體部分，它以層次化的結(jié)構(gòu)定義了可視場(chǎng)景中將要顯示的諸元素，如矩形、圖像、文本以及獲取用戶輸入的對(duì)象……它們都是QtQuick為用戶界面開發(fā)提供的基本構(gòu)件。例如，main.qml的對(duì)象聲明部分：Window{ //對(duì)象visible:true //屬性width:640height:480title:qsTr("HelloWorld")MainForm{ //子對(duì)象

…}}其中包含了兩個(gè)對(duì)象：一個(gè)Window對(duì)象和它的子對(duì)象MainForm。19.1.3QML基本語(yǔ)法在項(xiàng)目視圖中雙擊MainForm.ui.qml文件（與main.qml位于同一目錄）打開，切換到編輯模式，可以看到其代碼（為便于講解，加了注釋）。1．對(duì)象和屬性每個(gè)QML文檔有且只有一個(gè)根對(duì)象，在本例中就是一個(gè)Rectangle（矩形）對(duì)象。對(duì)象可以嵌套，即一個(gè)QML對(duì)象可以沒有、可以有一個(gè)或多個(gè)子對(duì)象，如在這個(gè)矩形中，系統(tǒng)默認(rèn)還定義了兩個(gè)子對(duì)象：MouseArea和TextEdit，而子對(duì)象TextEdit本身又擁有一個(gè)子對(duì)象Rectangle。19.1.3QML基本語(yǔ)法對(duì)象由它們的類型指定，以大寫字母開頭，后面跟一對(duì)大括號(hào){}，{}之中是該對(duì)象的屬性，屬性以鍵值對(duì)“屬性名:值”的形式給出，比如代碼中：Rectangle{

…width:360 //屬性（寬度）height:360 //屬性（高度）

…}定義了一個(gè)寬度和高度都是360像素的矩形。QML允許將多個(gè)屬性寫在一行，但它們之間必須用分號(hào)隔開，所以以上代碼也可以寫為：Rectangle{

…width:360;height:360 //屬性（寬度和高度）

…}對(duì)象MouseArea是可以響應(yīng)鼠標(biāo)事件的區(qū)域，作為子對(duì)象，它可以使用parent關(guān)鍵字訪問其父對(duì)象Rectangle。19.1.3QML基本語(yǔ)法2．對(duì)象標(biāo)識(shí)符每個(gè)對(duì)象都可以指定一個(gè)唯一的id值，這樣便可以在其他對(duì)象中識(shí)別并引用該對(duì)象。如本例代碼中：MouseArea{ id:mouseArea

…}就給MouseArea指定了id為mouseArea?？梢栽谝粋€(gè)對(duì)象所在的QML文檔中的任何地方，通過使用該對(duì)象的id來引用該對(duì)象。19.1.3QML基本語(yǔ)法3．屬性別名屬性也可以有別名，QML使用alias關(guān)鍵字聲明屬性的別名：“propertyalias別名：屬性名”，如本例中：Rectangle{ propertyaliasmouseArea:mouseArea //MouseArea的屬性別名propertyaliastextEdit:textEdit //TextEdit的屬性別名

…MouseArea{ id:mouseArea

…}TextEdit{id:textEdit

…}}19.1.3QML基本語(yǔ)法這里把MouseArea看成Rectangle的一個(gè)屬性（QML中的子對(duì)象也可視為其父對(duì)象的屬性），取其id（mouseArea）為屬性名，并給它定義一個(gè)別名“mouseArea”，這么做的目的是為了在外部QML文檔（main.qml）中也能訪問到MouseArea。因?yàn)镸ouseArea內(nèi)置有一個(gè)onClicked屬性，它是一個(gè)回調(diào)（鼠標(biāo)單擊事件），定義了別名后，就可在main.qml代碼中訪問這個(gè)屬性：mouseArea.onClicked:{console.log(qsTr('Clickedonbackground.Text:"'+textEdit.text+'"'))}當(dāng)單擊事件發(fā)出時(shí)，就會(huì)執(zhí)行onClicked中的代碼，在開發(fā)環(huán)境底部的“應(yīng)用程序輸出”子窗口中輸出文本“qml:Clickedonbackground.Text:"HelloWorld!"”。同理，TextEdit也可看成Rectangle的一個(gè)屬性，并為其定義別名和引用。19.1.3QML基本語(yǔ)法4．注釋QML文檔的注釋同C/C++、JavaScript代碼的注釋一樣：（1）單行注釋使用“//”開始，在行的末尾結(jié)束。（2）多行注釋使用“/*”開始，使用“*/”結(jié)尾。19.2QML可視元素19.2.1Rectangle（矩形）元素【例】（簡(jiǎn)單）（CH1902）在窗口中繪制矩形，運(yùn)行效果如圖19.7所示。實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Rectangle”。（2）雙擊項(xiàng)目視圖打開MainForm.ui.qml文件，修改代碼如下：19.2.1Rectangle（矩形）元素（3）雙擊打開main.qml文件，修改代碼如下：importQtQuick2.7importQtQuick.Window2.2Window{visible:truewidth:250height:220title:qsTr("Rectangle")MainForm{anchors.fill:parentmouseArea.onClicked:{topRect.visible=!topRect.visible//控制矩形對(duì)象的可見性}}}19.2.2Image（圖像）元素【例】（簡(jiǎn)單）（CH1903）將一張較大的風(fēng)景照適當(dāng)?shù)乜s小后顯示在窗體中，運(yùn)行效果如圖19.8所示。19.2.2Image（圖像）元素實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Image”。（2）在項(xiàng)目工程目錄中建一個(gè)images文件夾，其中放入一張照片，照片用數(shù)碼相機(jī)拍攝（尺寸980×751），文件名為“棲霞山楓葉.jpg”。（3）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加現(xiàn)有文件…”項(xiàng)，從彈出對(duì)話框中選擇事先準(zhǔn)備的“棲霞山楓葉.jpg”打開，如圖19.9所示，將其加載到項(xiàng)目中。19.2.2Image（圖像）元素（4）打開MainForm.ui.qml文件，修改代碼如下：…Rectangle{

…Image{ //圖像在窗口的位置坐標(biāo)x:20y:20 //寬和高均為原圖的1/4width:980/4;height:751/4 //(a)source:"images/棲霞山楓葉.jpg" //圖片路徑URLfillMode:Image.PreserveAspectCrop //(b)clip:true //避免所要渲染的圖片超出元素范圍}}19.2.3Text（文本）元素【例】（簡(jiǎn)單）（CH1904）各種典型文字效果的演示，如圖19.10所示。實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Text”。（2）打開MainForm.ui.qml文件，修改代碼。19.2.4自定義元素（組件）【例】（難度一般）（CH1905）自定義創(chuàng)建一個(gè)Button組件并在主窗口中使用它，運(yùn)行效果如圖19.11所示。19.2.4自定義元素（組件）實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Custom”。（2）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加新文件…”項(xiàng)，彈出“新建文件”對(duì)話框，如圖19.12所示，選擇文件和類“Qt”下的“QMLFile(QtQuick2)”模板。19.2.4自定義元素（組件）（3）單擊“Choose…”按鈕，在“Location”頁(yè)輸入文件名“Button”，并選擇保存路徑（本項(xiàng)目文件夾下），如圖19.13所示。19.2.4自定義元素（組件）（4）打開Button.qml文件，編寫代碼。（5）打開MainForm.ui.qml文件，修改代碼如下：…Rectangle{

…MouseArea{id:mouseAreaanchors.fill:parent}Button{ //復(fù)用Button組件x:25;y:25}}19.3QML元素布局19.3.1Positioner（定位器）1．行列、網(wǎng)格定位【例】（簡(jiǎn)單）（CH1906）行列和網(wǎng)格定位分別使用Row、Column和Grid元素，運(yùn)行效果如圖19.14所示。19.3.1Positioner（定位器）實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Positioner”。（2）按19.2.4節(jié)所講的方法定義紅、綠、藍(lán)三個(gè)矩形組件，代碼分別。（3）打開MainForm.ui.qml文件，修改代碼。19.3.1Positioner（定位器）2．流定位（Flow）【例】（簡(jiǎn)單）（CH1906續(xù)）流定位使用Flow元素，運(yùn)行效果如圖19.15所示。實(shí)現(xiàn)步驟如下。（1）仍然使用上例的項(xiàng)目“Positioner”，在其基礎(chǔ)上修改。（2）打開MainForm.ui.qml文件，修改代碼。19.3.1Positioner（定位器）3．重復(fù)器（Repeater）【例】（簡(jiǎn)單）（CH1907）Repeater結(jié)合Grid來排列一組矩形元素，運(yùn)行效果如圖19.16所示。實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Repeater”。（2）打開MainForm.ui.qml文件，修改代碼。19.3.2Anchor（錨）每一個(gè)元素都可以認(rèn)為有一組無形的“錨線”：left、horizontalCenter、right、top、verticalCenter和bottom，如圖19.17所示，Text元素還有一個(gè)baseline錨線（對(duì)于沒有文本的元素，它與top相同）。19.3.2Anchor（錨）錨系統(tǒng)還允許為一個(gè)元素的錨指定邊距（margin）和偏移（offset）。邊距指定了元素錨到外邊界的空間量，而偏移允許使用中心錨線來定位。一個(gè)元素可以通過leftMargin、rightMargin、topMargin和bottomMargin來獨(dú)立地指定錨邊距，如圖19.18所示，也可以使用anchor.margins來為所有的4個(gè)錨指定相同的邊距。19.3.2Anchor（錨）【例】（難度一般）（CH1908）使用Anchor布局一組矩形元素，并測(cè)試錨的特性，運(yùn)行效果如圖19.19所示。19.3.2Anchor（錨）實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“Anchor”。（2）將前面實(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ì)話框，如圖19.20所示。19.3.2Anchor（錨）（3）打開MainForm.ui.qml文件，修改代碼。（4）打開Button.qml文件，修改代碼。19.4QML事件處理19.4.1鼠標(biāo)事件【例】（難度一般）（CH1909）使用MouseArea接受和響應(yīng)鼠標(biāo)單擊、拖曳等事件，運(yùn)行效果如圖19.21所示。19.4.1鼠標(biāo)事件實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“MouseArea”。（2）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加新文件…”項(xiàng)，新建Rect.qml文件，編寫代碼。（3）打開MainForm.ui.qml文件，修改代碼如下：…Rectangle{

…MouseArea{id:mouseAreaanchors.fill:parent}

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

…MouseArea{id:mouseAreaanchors.fill:parent}TextEdit{id:textEditvisible:false}RotateRect{ //直接使用RotateRect組件x:50;y:50}}19.5.2導(dǎo)入JS文件【例】（難度一般）（CH1913）往QML源文件中導(dǎo)入使用外部JS文件來實(shí)現(xiàn)圖形旋轉(zhuǎn)，運(yùn)行效果同前圖19.24。實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項(xiàng)目名稱為“JSFile”。（2）右擊項(xiàng)目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加新文件…”項(xiàng)，彈出“新建文件”對(duì)話框，如圖19.25所示，選擇文件和類“Qt”下的“JSFile”模板。19.5.2導(dǎo)入JS文件（3）單擊“Choose…”按鈕，在“Location”頁(yè)輸入文件名“myscript”并選擇保存路徑（本項(xiàng)目文件夾下）。連續(xù)單擊“下一步”按鈕，最后單擊“完成”按鈕，就在項(xiàng)目中添加了一個(gè).js文件。（4）在myscript.js中編寫代碼如下：functiongetRandomNumber(){ //定義JavaScript函數(shù)returnMath.random()*360; //