Qt-5開發(fā)及實(shí)例-第23章-QML編程基礎(chǔ)

第23章QML編程基礎(chǔ)——QML概述QML概述QML是通過QtQML引擎在程序運(yùn)行時解析并運(yùn)行的。Qt5.11更高性能的編譯器通道意味著使用QML編寫的程序啟動時及運(yùn)行時速度更快、效率更高。QML新、舊編譯器通道如圖23.1所示。01第一個QML程序第一個QML程序【例】（簡單）（CH2301）這里先從一個最簡單的QML程序入手，介紹QML的基本概念。創(chuàng)建QML應(yīng)用程序，步驟如下。（1）啟動QtCreator，單擊主菜單“文件”→“新建文件或項目…”項，彈出“NewFileorProject”對話框，如圖23.2所示，選擇項目“Application”下的“QtQuickApplication”模板。第一個QML程序（2）單擊“Choose…”按鈕，在“QtQuickApplication”對話框的“ProjectLocation”頁輸入項目名稱“QmlDemo”，并選擇保存項目的路徑，如圖23.3所示。第一個QML程序（3）單擊“下一步”按鈕，在“DefineProjectDetails”頁選擇“Qt5.7”，如圖23.4所示。第一個QML程序（4）單擊“下一步”按鈕，在“KitSelection”頁，系統(tǒng)默認(rèn)已指定程序的編譯器和調(diào)試器，如圖23.5所示，直接單擊“下一步”按鈕。第一個QML程序（5）在“ProjectManagement”頁上自動匯總出要添加到該項目的文件，如圖23.6所示，單擊“完成”按鈕完成QML應(yīng)用程序的創(chuàng)建。第一個QML程序此時，系統(tǒng)自動將這些文件組織起來生成項目工程，并預(yù)生成了一個QML代碼的框架，其中main.qml為項目啟動的主程序文件，代碼如下：importQtQuick2.7importQtQuick.Window2.2Window{visible:truewidth:640height:480title:qsTr("HelloWorld")MainForm{anchors.fill:parentmouseArea.onClicked:{console.log(qsTr('Clickedonbackground.Text:"'+textEdit.text+'"'))}}}第一個QML程序單擊

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

...}}1．對象和屬性2．對象標(biāo)識符03QML基本語法3．屬性別名4．注釋QML基本語法子對象MainForm的詳細(xì)代碼在MainForm.ui.qml文件中，它也是一個QML文檔，讀者在編程設(shè)計UI界面時主要使用的就是這個文件。下面以該文件的內(nèi)容為例來簡單介紹QML的語法。在項目視圖中雙擊MainForm.ui.qml文件（與main.qml位于同一目錄）并打開，切換到編輯模式，可以看到其代碼（為便于講解，加了注釋）。1．對象和屬性對象由它們的類型指定，以大寫字母開頭，后面跟一對大括號{}，{}之中是該對象的屬性，屬性以鍵值對“屬性名:值”的形式給出，比如在代碼中：Rectangle{ ...width:360 //屬性（寬度）height:360 //屬性（高度） ...}定義了一個寬度和高度都是360像素的矩形。QML允許將多個屬性寫在一行，但它們之間必須用分號隔開，所以以上代碼也可以寫為：Rectangle{ ...width:360;height:360 //屬性（寬度和高度） ...}對象MouseArea是可以響應(yīng)鼠標(biāo)事件的區(qū)域，作為子對象，它可以使用parent關(guān)鍵字訪問其父對象Rectangle。其屬性anchors.fill起到布局作用，它會使MouseArea充滿一個對象的內(nèi)部，這里設(shè)值為parent表示MouseArea充滿整個矩形，即整個窗口內(nèi)部都是鼠標(biāo)響應(yīng)區(qū)。2．對象標(biāo)識符每個對象都可以指定一個唯一的id值，這樣便可以在其他對象中識別并引用該對象。例如在本例代碼中：MouseArea{ id:mouseArea ...}就給MouseArea指定了id為mouseArea?？梢栽谝粋€對象所在的QML文檔中的任何地方，通過使用該對象的id來引用該對象。因此，id值在一個QML文檔中必須是唯一的。對于一個QML對象而言，id值是一個特殊的值，不要把它看成一個普通的屬性，例如，無法使用mouseArea.id來進(jìn)行訪問。一旦一個對象被創(chuàng)建，它的id就無法被改變了。3．屬性別名屬性也可以有別名，QML使用alias關(guān)鍵字聲明屬性的別名：“propertyalias別名:屬性名”，如在本例中：Rectangle{ propertyaliasmouseArea:mouseArea //MouseArea的屬性別名propertyaliastextEdit:textEdit //TextEdit的屬性別名 ...MouseArea{ id:mouseArea ...}TextEdit{id:textEdit ...}}3．屬性別名這里把MouseArea看成Rectangle的一個屬性（QML中的子對象也可視為其父對象的屬性），取其id（mouseArea）為屬性名，并給它定義一個別名“mouseArea”，這樣做的目的是為了在外部QML文檔（main.qml）中也能訪問到MouseArea。因為MouseArea內(nèi)置了一個onClicked屬性，它是一個回調(diào)（鼠標(biāo)單擊事件），定義了別名后，就可在main.qml代碼中訪問這個屬性：mouseArea.onClicked:{console.log(qsTr('Clickedonbackground.Text:"'+textEdit.text+'"'))}當(dāng)單擊事件發(fā)出時，就會執(zhí)行onClicked中的代碼，在開發(fā)環(huán)境底部的“應(yīng)用程序輸出”子窗口中輸出文本“qml:Clickedonbackground.Text:"HelloWorld!"”。同理，TextEdit也可看成Rectangle的一個屬性，并為其定義別名和引用。4．注釋QML文檔的注釋同C/C++、JavaScript代碼的注釋一樣：（1）單行注釋使用“//”開始，在行的末尾結(jié)束。（2）多行注釋使用“/*”開始，使用“*/”結(jié)尾。因具體寫法在前面代碼中都給出過，故這里不再贅述。第23章QML編程基礎(chǔ)——QML可視元素01Rectangle（矩形）元素Rectangle（矩形）元素【例】（簡單）（CH2302）在窗口中繪制矩形，運(yùn)行效果如圖23.8所示。具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項目名稱為“Rectangle”。（2）雙擊項目視圖打開MainForm.ui.qml文件，修改代碼。Rectangle（矩形）元素（3）雙擊打開main.qml文件，修改代碼如下：importQtQuick2.7importQtQuick.Window2.2Window{visible:truewidth:250height:220title:qsTr("Rectangle")MainForm{anchors.fill:parentmouseArea.onClicked:{topRect.visible=!topRect.visible//控制矩形對象的可見性}}}由于已經(jīng)在MainForm.ui.qml文件中定義了屬性別名，故這里可以直接用矩形對象的標(biāo)識符topRect訪問其visible屬性以達(dá)到控制可見性的目的。在程序運(yùn)行中，單擊窗體內(nèi)任意位置，矩形topRect將時隱時現(xiàn)。02Image（圖像）元素Image（圖像）元素【例】（簡單）（CH2303）將一張較大的風(fēng)景圖片適當(dāng)?shù)乜s小后顯示在窗體中，運(yùn)行效果如圖23.9所示。具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項目名稱為“Image”。（2）在項目工程目錄中建一個images文件夾，其中放入一張圖片，該圖片是用數(shù)碼相機(jī)拍攝（尺寸為980像素×751像素）的，文件名為“長白山天池.jpg”。（3）右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加現(xiàn)有文件…”項，從彈出的對話框中選擇事先準(zhǔn)備的“長白山天池.jpg”文件并打開，如圖23.10所示，將其加載到項目中。

Image（圖像）元素（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 //避免所要渲染的圖片超出元素范圍}}其中，(a)width:980/4;height:751/4：Image的width和height屬性用來設(shè)定圖元的大小，如果沒有設(shè)置，則Image會使用圖片本身的尺寸；如果設(shè)置了，則圖片就會拉伸來適應(yīng)這個尺寸。本例設(shè)置它們均為原圖尺寸的1/4，為的是使其縮小后不變形。(b)fillMode:Image.PreserveAspectCrop：fillMode屬性設(shè)置圖片的填充模式，它支持Image.Stretch（拉伸）、Image.PreserveAspectFit（等比縮放）、Image.PreserveAspectCrop（等比縮放，最大化填充Image，必要時裁剪圖片）、Image.Tile（在水平和垂直兩個方向平鋪，就像貼瓷磚那樣）、Image.TileVertically（垂直平鋪）、Image.TileHorizontally（水平平鋪）、Image.Pad（保持圖片原樣不做變換）等模式。03Text（文本）元素Text（文本）元素【例】（簡單）（CH2304）各種典型文字效果的演示，運(yùn)行效果如圖23.11所示。具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項目名稱為“Text”。（2）打開MainForm.ui.qml文件，修改代碼。其中，(a)text:"<b>Hello</b><i>QtQuick!</i>"：Text元素支持用HTML類型標(biāo)記定義富文本，它有一個textFormat屬性，默認(rèn)值為Text.RichText（輸出富文本）；若顯式地指定為Text.PlainText，則會輸出純文本（連同HTML標(biāo)記一起作為字符輸出）。(b)style:Text.Outline;styleColor:"blue"：style屬性設(shè)置文本的樣式，支持的文本樣式有Text.Normal、Text.Outline、Text.Raised和Text.Sunken；styleColor屬性設(shè)置樣式的顏色，這里是藍(lán)色。(c)elide:Text.ElideRight：設(shè)置省略文本的部分內(nèi)容來適合Text的寬度，若沒有對Text明確設(shè)置width值，則elide屬性將不起作用。elide可取的值有Text.ElideNone（默認(rèn)，不省略）、Text.ElideLeft（從左邊省略）、Text.ElideMiddle（從中間省略）和Text.ElideRight（從右邊省略）。(d)wrapMode:Text.WrapAnywhere：如果不希望使用elide省略顯示方式，還可以通過wrapMode屬性指定換行模式，本例中設(shè)為Text.WrapAnywhere，即只要達(dá)到邊界（哪怕在一個單詞的中間）都會進(jìn)行換行；若不想這么做，可設(shè)為Text.WordWrap只在單詞邊界換行。04自定義元素（組件）自定義元素（組件）【例】（難度一般）（CH2305）自定義創(chuàng)建一個Button組件并在主窗口中使用它，運(yùn)行效果如圖23.12所示。自定義元素（組件）具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項目名稱為“Custom”。（2）右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加新文件…”項，彈出“新建文件”對話框，如圖23.13所示，選擇文件和類“Qt”下的“QMLFile(QtQuick2)”模板。自定義元素（組件）（3）單擊“Choose…”按鈕，在“Location”頁輸入文件名“Button”，并選擇保存路徑（本項目文件夾下），如圖23.14所示。自定義元素（組件）（4）打開Button.qml文件，編寫代碼如下：importQtQuick2.0Rectangle{ //將Rectangle自定義成按鈕id:btnwidth:100;height:62 //按鈕的尺寸color:"teal" //按鈕顏色border.color:"aqua" //按鈕邊界色border.width:3 //按鈕邊界寬度Text{ //Text元素作為按鈕文本id:labelanchors.centerIn:parentfont.pointSize:16text:"開始"}MouseArea{ //MouseArea對象作為按鈕單擊事件響應(yīng)區(qū)anchors.fill:parentonClicked:{ //響應(yīng)單擊事件代碼label.text="按鈕已按下！"label.font.pointSize=11 //改變按鈕文本和字號btn.color="aqua" //改變按鈕顏色btn.border.color="teal" //改變按鈕邊界色}}}自定義元素（組件）（5）打開MainForm.ui.qml文件，修改代碼如下：...Rectangle{ ...MouseArea{id:mouseAreaanchors.fill:parent}Button{ //復(fù)用Button組件x:25;y:25}}第23章QML編程基礎(chǔ)——QML元素布局1．行列、網(wǎng)格定位2．流定位（Flow）01Positioner（定位器）3．重復(fù)器（Repeater）1．行列、網(wǎng)格定位【例】（簡單）（CH2306）行列和網(wǎng)格定位分別使用Row、Column和Grid元素，運(yùn)行效果如圖23.15所示。1．行列、網(wǎng)格定位具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項目名稱為“Positioner”。（2）按23.2.4節(jié)介紹的方法定義紅、綠、藍(lán)三個矩形組件，代碼分別如下：/*紅色矩形，源文件RedRectangle.qml*/importQtQuick2.0Rectangle{width:64 //寬度height:32 //高度color:"red" //顏色border.color:Qt.lighter(color) //邊框色設(shè)置比填充色淺（默認(rèn)是50%）}/*綠色矩形，源文件GreenRectangle.qml*/importQtQuick2.0Rectangle{width:48height:62color:"green"border.color:Qt.lighter(color)}/*藍(lán)色矩形，源文件BlueRectangle.qml*/importQtQuick2.0Rectangle{width:80height:50color:"blue"border.color:Qt.lighter(color)}1．行列、網(wǎng)格定位（3）打開MainForm.ui.qml文件，修改代碼。其中，(a)Row{…}：Row將被其定位的元素成員都放置在一行的位置，所有元素之間的間距相等（由spacing屬性設(shè)置），頂端保持對齊。layoutDirection屬性設(shè)置元素的排列順序，可取值為Qt.LeftToRight（默認(rèn)，從左向右）、Qt.RightToLeft（從右向左）。(b)Column{…}：Column將元素成員按照加入的順序從上到下在同一列排列出來，同樣由spacing屬性指定元素間距，所有元素靠左對齊。(c)Grid{…}：Grid將其元素成員排列為一個網(wǎng)格，默認(rèn)從左向右排列，每行4個元素?？赏ㄟ^設(shè)置rows和columns屬性來自定義行和列的數(shù)值，如果二者有一個不顯式設(shè)置，則另一個會根據(jù)元素成員的總數(shù)計算出來。例如，本例中的columns設(shè)置為3，一共放入5個藍(lán)色矩形，行數(shù)就會自動計算為2。2．流定位（Flow）【例】（簡單）（CH2306續(xù)）流定位使用Flow元素，運(yùn)行效果如圖23.16所示。具體實(shí)現(xiàn)步驟如下。（1）仍然使用上例的項目“Positioner”，在其基礎(chǔ)上修改。（2）打開MainForm.ui.qml文件，修改代碼如下：importQtQuick2.7Rectangle{propertyaliasmouseArea:mouseAreawidth:200;height:200 //(a)MouseArea{id:mouseAreaanchors.fill:parent}Flow{ //(b)anchors.fill:parentanchors.margins:15 //元素與窗口左上角邊距為15像素spacing:5

//以下添加被Flow定位的元素成員RedRectangle{}BlueRectangle{}GreenRectangle{}}}2．流定位（Flow）3．重復(fù)器（Repeater）【例】（簡單）（CH2307）Repeater結(jié)合Grid來排列一組矩形元素，運(yùn)行效果如圖23.17所示。具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項目名稱為“Repeater”。（2）打開MainForm.ui.qml文件，修改代碼。其中，(a)Repeater{…}：重復(fù)器，作為Grid的數(shù)據(jù)提供者，它可以創(chuàng)建任何QML基本的可視元素。因Repeater會按照其model屬性定義的個數(shù)循環(huán)生成子元素，故上面代碼重復(fù)生成16個Rectangle。(b)text:index：Repeater會為每個子元素注入一個index屬性，作為當(dāng)前的循環(huán)索引（本例中是0～15）。因可以在子元素定義中直接使用這個屬性，故這里用它給Text的text屬性賦值。02Anchor（錨）Anchor（錨）除前面介紹的Row、Column和Grid等外，QML還提供了一種使用Anchor（錨）來進(jìn)行元素布局的方法。每個元素都可被認(rèn)為有一組無形的“錨線”：left、horizontalCenter、right、top、verticalCenter和bottom，如圖23.18所示，Text元素還有一個baseline錨線（對于沒有文本的元素，它與top相同）。Anchor（錨）這些錨線分別對應(yīng)元素中的anchors.left、anchors.horizontalCenter等屬性，所有的可視元素都可以使用錨來布局。錨系統(tǒng)還允許為一個元素的錨指定邊距（margin）和偏移（offset）。邊距指定了元素錨到外邊界的空間量，而偏移允許使用中心錨線來定位。一個元素可以通過leftMargin、rightMargin、topMargin和bottomMargin來獨(dú)立地指定錨邊距，如圖23.19所示，也可以使用anchor.margins來為所有的4個錨指定相同的邊距。Anchor（錨）【例】（難度一般）（CH2308）使用Anchor布局一組矩形元素，并測試錨的特性，布局運(yùn)行效果如圖23.20所示。Anchor（錨）具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項目名稱為“Anchor”。（2）本項目需要復(fù)用之前已開發(fā)的組件。將前面實(shí)例CH1905和CH1906中的源文件Button.qml、RedRectangle.qml、GreenRectangle.qml及BlueRectangle.qml復(fù)制到本項目目錄下。右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加現(xiàn)有文件…”項，彈出“添加現(xiàn)有文件”對話框，如圖23.21所示，選中上述幾個.qml文件，單擊“打開”按鈕將它們添加到當(dāng)前項目中。Anchor（錨）（3）打開MainForm.ui.qml文件，修改代碼。其中，(a)/*定義屬性別名*/：這里定義矩形changingRect1、changingRect2及redRect的別名，目的是在按鈕組件的源文件（外部QML文檔）中能訪問這幾個元素，以便測試它們的錨定特性。(b)/*使用Anchor對三個矩形元素進(jìn)行橫向布局*/：這段代碼使用已定義的三個現(xiàn)成矩形元素，通過分別設(shè)置anchors.left、anchors.top、anchors.leftMargin、anchors.topMargin等錨屬性，對它們進(jìn)行從左到右的布局，這與之前介紹的Row的布局作用一樣。讀者還可以修改其他錨屬性以嘗試更多的布局效果。(c)/*對比測試Anchor的性質(zhì)*/：錨屬性還可以在程序運(yùn)行中通過代碼設(shè)置來動態(tài)地改變，為了對比，本例設(shè)計使用兩個相同的紅矩形，初始它們都與窗體左錨線錨定（對齊），然后改變右錨屬性來觀察它們的行為。(d)width:95;height:35：按鈕組件原定義尺寸為“width:100;height:62”，復(fù)用時可以重新定義它的尺寸屬性以使程序界面更美觀。新屬性值會“覆蓋”原來的屬性值，就像面向?qū)ο蟮摹袄^承”一樣提高了靈活性。Anchor（錨）（4）打開Button.qml文件，修改代碼如下：...Rectangle{id:btnwidth:100;height:62...Text{ ...}MouseArea{anchors.fill:parentonClicked:{label.text="按鈕已按下！"label.font.pointSize=11btn.color="aqua"btn.border.color="teal" /*改變changingRect1的右錨屬性*/ //(a)chgRect1.anchors.left=undefinedchgRect1.anchors.right=rRect.right /*改變changingRect2的右錨屬性*/ //(b)chgRect2.anchors.right=rRect.rightchgRect2.anchors.left=undefined}}}Anchor（錨）其中，(a)/*改變changingRect1的右錨屬性*/：這里用“chgRect1.anchors.left=undefined”先解除其左錨屬性的定義，然后再定義右錨屬性，執(zhí)行后，該矩形便會移動到與redRect（第一行最右邊的紅矩形）右對齊。(b)/*改變changingRect2的右錨屬性*/：這里先用“chgRect2.anchors.right=rRect.right”指定右錨屬性，由于此時元素的左錨屬性尚未解除，執(zhí)行后，矩形位置并不會移動，而是寬度自動“拉長”到與redRect右對齊，之后即使再解除左錨屬性也無濟(jì)于事，故用戶在編程改變布局時，一定要先將元素的舊錨解除，新設(shè)置的錨才能生效！第23章QML編程基礎(chǔ)——QML事件處理01

鼠

標(biāo)

事

件

鼠標(biāo)事件【例】（難度一般）（CH2309）使用MouseArea接受和響應(yīng)鼠標(biāo)單擊、拖曳等事件，運(yùn)行效果如圖23.22所示。

鼠標(biāo)事件具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項目名稱為“MouseArea”。（2）右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加新文件…”項，新建Rect.qml文件，編寫代碼。其中，(a)/*拖曳屬性設(shè)置*/：MouseArea中的drag分組屬性提供了一個使元素可被拖曳的簡便方法。drag.target屬性用來指定被拖曳的元素的id（這里為parent表示被拖曳的就是所在元素本身）；drag.active屬性獲取元素當(dāng)前是否正在被拖曳的信息；drag.axis屬性用來指定拖曳的方向，可以是水平方向（Drag.XAxis）、垂直方向（Drag.YAxis）或者兩個方向都可以（Drag.XandYAxis）；drag.minimumX和drag.maximumX限制了元素在指定方向上被拖曳的范圍。(b)acceptedButtons:Qt.LeftButton|Qt.RightButton：MouseArea所能接受的鼠標(biāo)按鍵，可取的值有Qt.LeftButton（鼠標(biāo)左鍵）、Qt.RightButton（鼠標(biāo)右鍵）和Qt.MiddleButton（鼠標(biāo)中鍵）。(c)mouse.button：為MouseArea信號中所包含的鼠標(biāo)事件參數(shù)，其中mouse為鼠標(biāo)事件對象，可以通過它的x和y屬性獲取鼠標(biāo)當(dāng)前的位置；通過button屬性獲取按下的按鍵。(d)mouse.modifiers&Qt.ShiftModifier：通過modifiers屬性可以獲取按下的鍵盤修飾符，modifiers的值由多個按鍵進(jìn)行位組合而成，在使用時需要將modifiers與這些特殊的按鍵進(jìn)行按位與來判斷按鍵，常用的按鍵有Qt.NoModifier（沒有修飾鍵）、Qt.ShiftModifier（一個Shift鍵）、Qt.ControlModifier（一個Ctrl鍵）、Qt.AltModifier（一個Alt鍵）。

鼠標(biāo)事件（3）打開MainForm.ui.qml文件，修改代碼如下：...Rectangle{ ...MouseArea{id:mouseAreaanchors.fill:parent} ...Rect{ //復(fù)用定義好的矩形元素x:25;y:25 //初始坐標(biāo)opacity:(360.0-x)/360 //透明度設(shè)置}}02鍵

盤

事

件鍵盤事件【例】（難度一般）（CH2310）利用鍵盤事件處理制作一個模擬桌面應(yīng)用圖標(biāo)選擇程序，運(yùn)行效果如圖23.23所示，按Tab鍵切換選項，當(dāng)前選中的圖標(biāo)以彩色放大顯示，還可以用←、↑、↓、→方向鍵移動圖標(biāo)位置。鍵盤事件具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項目名稱為“Keyboard”。（2）打開MainForm.ui.qml文件，修改代碼。其中，(a)KeyNavigation.tab:play：QML中的KeyNavigation元素是一個附加屬性，可以用來實(shí)現(xiàn)使用方向鍵或Tab鍵來進(jìn)行元素的導(dǎo)航。它的子屬性有backtab、down、left、priority、right、tab和up等，本例用其tab屬性設(shè)置焦點(diǎn)轉(zhuǎn)移次序，“KeyNavigation.tab:play”表示按下Tab鍵焦點(diǎn)轉(zhuǎn)移到id為“play”的元素（“游戲”圖標(biāo)）。(b)/*移動圖標(biāo)位置*/：這里使用Keys屬性來進(jìn)行按下方向鍵后的事件處理，它也是一個附加屬性，對QML所有的基本可視元素均有效。Keys屬性一般與focus屬性配合使用，只有當(dāng)focus值為true時，它才起作用，由Keys屬性獲取相應(yīng)鍵盤事件的類型，進(jìn)而決定所要執(zhí)行的操作。03輸入控件與焦點(diǎn)輸入控件與焦點(diǎn)【例】（難度中等）（CH2311）用QML輸入元素定制文本框，可用Tab鍵控制其焦點(diǎn)轉(zhuǎn)移，運(yùn)行效果如圖23.24所示。輸入控件與焦點(diǎn)具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項目名稱為“TextInput”。（2）右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加新文件…”項，新建TextBox.qml文件，編寫代碼。其中，(a)FocusScope{…}：將自定義的組件置于FocusScope元素中是為了能有效地控制焦點(diǎn)。因TextInput是作為Rectangle的子元素定義的，在程序運(yùn)行時，Rectangle不會主動將焦點(diǎn)轉(zhuǎn)發(fā)給TextInput，故輸入框無法自動獲得焦點(diǎn)。(b)propertyaliaslabel：label.text：定義Text元素的text屬性的別名，是為了在編程時引用該別名修改文本框前的提示文本，定制出“學(xué)號”“姓名”等對應(yīng)不同輸入項的文本框，增強(qiáng)通用性。

(c)propertyaliastext：input.text：為了讓外界可以直接設(shè)置TextInput的text屬性，給這個屬性也聲明了一個別名。(d)Row{…}：用Row定位器設(shè)計出這個復(fù)合組件的外觀，它由Text和Rectangle兩個元素行布局排列組合而成，兩者頂端對齊，相距spacing為5。(e)Rectangle{…}：矩形元素作為TextInput的父元素，是專為呈現(xiàn)輸入框可視外觀的，QML本身提供的TextInput只有光標(biāo)和文本內(nèi)容而無邊框，將矩形設(shè)為白色灰邊框，對TextInput進(jìn)行可視化修飾。(f)TextInput：這才是真正實(shí)現(xiàn)該組件核心功能的元素，將其定義為矩形的子元素并且充滿整個Rectangle，就可以呈現(xiàn)出與文本框一樣的可視效果。（3）打開MainForm.ui.qml文件，修改代碼。第23章QML編程基礎(chǔ)——QML集成JavaScript01調(diào)用JavaScript函數(shù)調(diào)用JavaScript函數(shù)【例】（難度一般）（CH2312）編寫JavaScript函數(shù)實(shí)現(xiàn)圖形的旋轉(zhuǎn)，每單擊一次鼠標(biāo)，矩形就轉(zhuǎn)動一個隨機(jī)的角度，運(yùn)行效果如圖23.25所示。具體實(shí)現(xiàn)步驟如下。（1）新建QML應(yīng)用程序，項目名稱為“JavaScript”。（2）右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點(diǎn)，選擇“添加新文件…”項，新建RotateRect.qml文件，編寫代碼。調(diào)用Java