QtQuick中文手冊

1、QML 雜記 Tonkv翻譯Qt Quick簡介Qt Quick提供了一套高動態(tài)，豐富的QML元素來定制用戶界面的說明性框架。Qt Quick有助于程序開發(fā)員與界面設(shè)計員的合作為便攜式設(shè)備建立流暢的用戶界面，例如：移動電話、媒體播放器，機頂盒以及上網(wǎng)本等。Qt Quick包含了QtDeclarative C+模塊，QML并且它們?nèi)徽系絈tCreate IDE中。使用QtDeclarative C+模塊可以從你的QT 應(yīng)用程序中載入QML文件并與之互動。QML是對Ja vaScript一種擴展，它提供一種機制使用QML元素來說明構(gòu)建一個對象樹。QML對Ja vaScript與Qt現(xiàn)有的QOb

2、jec -tbase類型系統(tǒng)進行整合改善；增加了自動屬性綁定的支持并提供在語言級別的網(wǎng)絡(luò)透明度。QML元素是一套先進的圖形，就像搭積木方式那樣構(gòu)建界面。這些不同的元素是通過QML文檔來綁在一起的，從簡單的按鈕與滑塊到復(fù)雜完整的應(yīng)用程序，例如一個受歡迎的Flickr照片共享網(wǎng)站上的照片瀏覽器。Qt Quick是建立在Qt固有優(yōu)勢的基礎(chǔ)上。QML可被用于逐步擴展現(xiàn)有的程序或創(chuàng)建全新的應(yīng)用程序。QML通過QtDeclarative 模塊來完全擴展C+功能。入門QML語言入門QML是一個說明性語言，用來描述程序的用戶界面：它的外觀以及它的行為。在QML中，一個用戶界面作為一個帶有屬性的對象樹。本篇是為

3、有很少或沒有編程經(jīng)驗的人準(zhǔn)備的。Ja vaScript是用來作為QML的腳本語言，所以你可能想對它了解多一點（Ja vaScript：The Definitive Guide），然后再深入QML。另外如HTML與CSS等Web 技術(shù)的基礎(chǔ)原理也是有幫助的；但它不是必需的。QML語言基礎(chǔ)QML類似這樣：import Qt 4.7Rectangle 語言島網(wǎng)站 1QML 雜記 Tonkv翻譯width: 200height: 200color: blueImage source: pics/logo.pnganchors.centerIn: parent對象是指定的類型，緊隨其后是一對大括號，對象

4、類型總是首字母為大寫。在上面的示例中，有兩個對象，一個Rectangle矩形與一個Image圖像。在大括號之間是關(guān)于該對象特定的信息，例如它們的屬性。屬性是以property屬性: value值形式指定的。在上面的示例中，我們可以看到圖像有個名為source來源的屬性，它的值被指定為”pics/logo.png”。該屬性與它的值是由冒號來分隔。屬性是由單行來輸寫：Rectangle width: 100height: 100或單行輸寫多個屬性：Rectangle width: 100; height: 100 當(dāng)單行輸寫多屬性/值時，必須由分號來分隔開來。Import語句導(dǎo)入Qt模塊，它包含所

5、有標(biāo)準(zhǔn)的QML元素。如果沒有Import語句；那么Rectangle與Image元素將無效。表達式除了賦值屬性外；你也可以用JavaScript編寫的表達式來指定。Rotation angle: 360 * 3這些表達式可以包含其它的對象與屬性的引用，在這種情況下就會建立約束關(guān)聯(lián)：當(dāng)該表達式改變值語言島網(wǎng)站 2QML 雜記 Tonkv翻譯時；該屬性值將自動更新。Item Text id: text1text: Hello WorldText id: text2text: text1.text在上面的示例中，text2對象將顯示與text1相同的文本。如果text1改變值；那么text2也將自動

6、更新為相同的值。注意這里我們通過使用id值引用其它的對象。（詳情請參見id屬性信息）QML注釋在QML中的注釋類似于JavaScript。單選注釋以 / 開始。多行注釋以 /* 開始，以 */ 結(jié)束。import Qt 4.7注釋是不被執(zhí)行的，添加注釋可對代碼進行解釋或者提高其可讀性。注釋同樣還可用于防止代碼執(zhí)行，這對跟蹤問題是非常有用的。Text text: Hello world!/opacity: 0.5在上面的示例中，這個Text對象將正常顯示，一旦opacity: 0.5這行關(guān)掉注釋，這是以半透明方式顯示文本。屬性屬性命名屬性命名以首字母為小字（附加屬性除外）。語言島網(wǎng)站 3QML

7、雜記 Tonkv翻譯屬性類型QML支持許多類型的屬性（參閱QML基本類型）?；绢愋桶ㄕ?、實數(shù)型、布爾、字符串、顏色以及列表。Item x: 10.5 / a real property.state: details / a string propertyfocus: true / a bool propertyQML屬性是有類型安全檢測的。也就是說，它們只允許你指定一個與屬性類型相匹配的值。例如，項目x屬性類型是實數(shù)，如果你賦值一個字符串；那么將會得到錯誤的信息。Item x: hello / illegal!id屬性每個對象可給予一個特定唯一的屬性稱之為id。在同一個QML文件中不可能

8、擁有與其它對象同名的id值。指定一個id可以允許該對象可以被其它的對象與腳本引用。下面的示例中，第一個矩形元素的id名為”myRect”。第二個矩形元素的寬度是引用的myRect.widtch，這意味著它將與第一矩形具有相同的width值。Item Rectangle id: myRectwidth: 100height: 100Rectangle width: myRect.widthheight: 200請注意，一個id首字符必須是小寫字母或下劃線并且不能包含字母，數(shù)字和下劃線以外的字符。語言島網(wǎng)站 4QML 雜記 Tonkv翻譯列表屬性列表屬性類似于下面這樣：Item children:

9、 Image ,Text 列表是包含在方括號內(nèi)，以逗號分隔的列表元素。在你只分配單一項目列表的情況下，是可以省略方括號：Image children: Rectangle 默認(rèn)屬性每個對象類型可以指定列表或?qū)ο髮傩灾蛔鳛槠淠J(rèn)屬性。如果一屬性已被聲明為默認(rèn)屬性，該屬性標(biāo)記可以被省略。例如該代碼：State changes: PropertyChanges ,PropertyChanges 可以簡化成這樣：State PropertyChanges ,PropertyChanges 因為changes是State類型的默認(rèn)屬性。分組屬性在某些情況下使用一個.符號或分組符號形成一個邏輯組。分組屬

10、性可寫以下這樣：語言島網(wǎng)站 5QML 雜記 Tonkv翻譯Text font.pixelSize: 12font.bold: true或者這樣：Text font pixelSize: 12; bold: true 在元素文件分組屬性使用.符號顯示。附加屬性有些對象的屬性附加到另一個對象。附加屬性的形式為Tperty其中Type是附加property元素的類型。例如：Component id: myDelegateText text: Hellocolor: ListView.isCurrentItem ? red : blueListView delegate: myDeleg

11、ateListView元素附加ListView.isCurrentItem屬性到每個它創(chuàng)建的代理上。另一個附加屬性的例子就是Keys元素，它用于處理任意可視項目上的按鍵，例如：Item focus: trueKeys.onSelectPressed: console.log(Selected)信號處理器信號處理器允許響應(yīng)事件時處理動作。例如，MouseArea元素有信號處理器來處理鼠標(biāo)按下，釋放語言島網(wǎng)站 6QML 雜記 Tonkv翻譯以及單擊：MouseArea onPressed: console.log(mouse button pressed)所有信號處理器開始都是啟用的。有一些信號處

12、理器包含一個可選的參數(shù)，例如MouseArea onPressed信號處理程序有鼠標(biāo)參數(shù)：MouseArea acceptedButtons: Qt.LeftButton | Qt.RightButtononPressed: if (mouse.button = Qt.RightButton) console.log(Right mouse button pressed)QML教程這節(jié)內(nèi)容是通過QML入門教程來熟悉Qt Quick語言。當(dāng)然它不會面面俱到；只是重點讓大家熟悉主要語法與特性。通過這節(jié)幾個不同的步驟我們學(xué)習(xí)QML基本類型，使用屬性與信號來建立我們自己的QML組件；而且還要使用狀態(tài)與

13、變換的幫助來建立一個簡單的動畫。這節(jié)從迷你的“Hello World”程序出發(fā)，在隨后的章節(jié)中將引入新的概念。這個教程的源代碼位于$QTDIR/examples/declarative/tutorials/helloworld文件夾下。教程1基本類型這是一個非常簡單的”Hello World”程序，它將介紹一些基本的QML概念。下圖是該程序運行的結(jié)果。語言島網(wǎng)站 7QML 雜記 Tonkv翻譯這是該程序的源代碼：import Qt 4.7Rectangle id: pagewidth: 500; height: 200color: lightgrayText id: helloTexttext

14、: Hello world!y: 30anchors.horizontalCenter: page.horizontalCenterfont.pointSize: 24; font.bold: true逐步講解導(dǎo)入首先，我們必須導(dǎo)入我們這個范例需要的類型。大多數(shù)QML文件都將導(dǎo)入內(nèi)置的QML類型（類似于Rectangle,Image）這都包含在Qt內(nèi)，使用：import Qt 4.7Rectangle元素Rectangle id: pagewidth: 500; height: 200color: lightgray我們聲明類型Rectangle為根元素。你可以使用它在應(yīng)用程序中創(chuàng)建一個基本塊

15、。我們這里給予它一個id作為標(biāo)簽以便稍后引用。在這種情況里，我們命名它為“page”。同樣也設(shè)置width,height與color屬性。Rectangle元素還包含許多其它的屬性（例如x與y)；但這些我們保留它們默認(rèn)的值。Text元素Text id: helloText語言島網(wǎng)站 8QML 雜記 Tonkv翻譯text: Hello world!y: 30anchors.horizontalCenter: page.horizontalCenterfont.pointSize: 24; font.bold: true這里添加一個Text元素作為根元素Rectangle的子級來顯示文本“Hel

16、lo World!”。這里的y屬性是用于定位文本從它父級頂部垂直距離30像素的位置。anchors.horizontalCenter屬性將參考一個元素的水平中心位置。在這里我們指定文本元素位于page元素的水平中心位置。font.poingSize與font.bold屬性是與字體設(shè)置相關(guān)。查看該范例為了查看你編寫好的程序，請運行QML Viewr工具（位于bin文件夾下），用你程序文件名作為第一個參數(shù)。例如運行這里提供的教程1范例，你需要這樣輸入命令行：bin/qmlviewer $QTDIR/examples/declarative/tutorials/helloworld/tutorial

17、1.qml教程2QML組件這節(jié)增加了一個顏色拾取器用于顏色該文本。我們的顏色拾取器是六格不同顏色的單元格。為了避免每個單元格重復(fù)多次相同的代碼，我們將創(chuàng)建一個新的cell組件。組件是定義一個新類型的方法，可以在其它的QML文件重復(fù)使用。QML組件類似于黑匣子通過屬性、信號以及函數(shù)與外部世界相互影響，通常是在自己的QML文件中定義的。（詳情請參見 定義新組件）。該組件的文件名必須以一個大寫字母開頭。Cell.qml的QML代碼語言島網(wǎng)站 9QML 雜記 Tonkv翻譯import Qt 4.7Item id: containerproperty alias cellColor: rectangl

18、e.colorsignal clicked(color cellColor)width: 40; height: 25Rectangle id: rectangleborder.color: whiteanchors.fill: parentMouseArea anchors.fill: parentonClicked: container.clicked(container.cellColor)逐步講解Cell組件Item id: containerproperty alias cellColor: rectangle.colorsignal clicked(color cellColor)

19、width: 40; height: 25我們組件的根元素是一個id名為 container的Item。Item是一個最基本的可視元素并經(jīng)常用作其它元素的容器。property alias cellColor: rectangle.color聲明一個cellColor屬性。這個屬性是從我們組件外訪問的，允許我們使用不同的顏色來實例化單元格。該屬性只是對現(xiàn)存的屬性使用了一個別名。signal clicked(color cellColor)語言島網(wǎng)站 10QML 雜記 Tonkv翻譯我們需要這個組件cellColor屬性帶有color類型的單擊信號，這將在稍后的主QML文件中使用到這個信號來改變

20、文本的顏色。Rectangle id: rectangleborder.color: whiteanchors.fill: parent我們單元格組件是id名為rectangle的顏色化矩形。anchors.fill屬性是設(shè)置元素尺寸的簡便辦法。在這種情況下矩形將擁有父級同樣尺寸的大小。MouseArea anchors.fill: parentonClicked: container.clicked(container.cellColor)為了單擊一個單元格來改變文本的顏色，我們創(chuàng)建一個MouseArea元素，它是與父級有同樣尺寸的。MouseArea定義了一個Clicked信號。當(dāng)這個信號

21、被觸發(fā)時；我們發(fā)射使用顏色作為參數(shù)的單擊信號。主QML文件在我們的主QML文件中，我們使用Cell組件來創(chuàng)建顏色拾取器：import Qt 4.7Rectangle id: pagewidth: 500; height: 200color: lightgrayText id: helloTexttext: Hello world!y: 30anchors.horizontalCenter: page.horizontalCenterfont.pointSize: 24; font.bold: trueGrid id: colorPickerx: 4; anchors.bottom: page.

22、bottom; anchors.bottomMargin: 4rows: 2; columns: 3; spacing: 3Cell cellColor: red; onClicked: helloText.color = cellColor Cell cellColor: green; onClicked: helloText.color = cellColor Cell cellColor: blue; onClicked: helloText.color = cellColor Cell cellColor: yellow; onClicked: helloText.color = ce

23、llColor Cell cellColor: steelblue; onClicked: helloText.color = cellColor Cell cellColor: black; onClicked: helloText.color = cellColor 語言島網(wǎng)站 11QML 雜記 Tonkv翻譯我們在網(wǎng)格中放置六個單元格，使用不同的顏色來創(chuàng)建一個顏色拾取器。Cell cellColor: red; onClicked: helloText.color = cellColor 當(dāng)我們單元格的clicked信號觸發(fā)時，需要傳遞cellColor參數(shù)來設(shè)置文本的顏色 。通過一個屬

24、性的onSignalName的命名方式來應(yīng)付組件的任何信號。教程3狀態(tài)與變換在這一節(jié)中，我們使用這個例子有更多的動態(tài)，這里介紹狀態(tài)與變換。我們可以使用文本移動到屏幕的底部，當(dāng)單擊時旋轉(zhuǎn)并變成紅色。QML代碼：import Qt 4.7Rectangle id: pagewidth: 500; height: 200color: lightgrayText id: helloTexttext: Hello world!y: 30anchors.horizontalCenter: page.horizontalCenterfont.pointSize: 24; font.bold: trueMou

25、seArea id: mouseArea; anchors.fill: parent states: State name: down; when: mouseArea.pressed = truePropertyChanges target: helloText; y: 160; rotation: 180; color: red transitions: Transition from: ; to: down; reversible: trueParallelAnimation NumberAnimation properties: y,rotation; duration: 500; e

26、asing.type: Easing.InOutQuad ColorAnimation duration: 500 Grid 語言島網(wǎng)站 12QML 雜記 Tonkv翻譯id: colorPickerx: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4rows: 2; columns: 3; spacing: 3Cell cellColor: red; onClicked: helloText.color = cellColor Cell cellColor: green; onClicked: helloText.color =

27、 cellColor Cell cellColor: blue; onClicked: helloText.color = cellColor Cell cellColor: yellow; onClicked: helloText.color = cellColor Cell cellColor: steelblue; onClicked: helloText.color = cellColor Cell cellColor: black; onClicked: helloText.color = cellColor 逐步講解states: State name: down; when: m

28、ouseArea.pressed = truePropertyChanges target: helloText; y: 160; rotation: 180; color: red 首先我們對文本元素創(chuàng)建名為down的狀態(tài)。當(dāng)MouseArea被按下時，這個狀態(tài)將被激活；當(dāng)鼠標(biāo)鍵釋放時，將處于非激活狀態(tài)。down狀態(tài)包含一套從默認(rèn)狀態(tài)中的屬性改變（這在QML中已經(jīng)初始化定義過）。這里是設(shè)置文本的y屬性為160,旋轉(zhuǎn)180度并且設(shè)置為color為紅色。transitions: Transition from: ; to: down; reversible: trueParallelAnimat

29、ion NumberAnimation properties: y,rotation; duration: 500; easing.type: Easing.InOutQuad ColorAnimation duration: 500 因為我們不希望文本運動時出現(xiàn)不平滑的現(xiàn)象，這里在兩個狀態(tài)之間添加一個過渡。from與to定義兩狀態(tài)間的變換。在這里是從默認(rèn)狀態(tài)到down狀態(tài)的變換。因為我們需要從down狀態(tài)返回到默認(rèn)狀態(tài)有同樣的變換，還需要設(shè)置reversible為ture。這等于分別寫了兩種變換。ParallelAnimation元素確保動畫的兩種類型（數(shù)值與顏色的變化）同時開始。我們同樣可

30、以使用SequentialAnimation來替代，它是序列進行的，當(dāng)一個動畫完成后，再接著另一個動畫。利用QML 開發(fā)Qt 程序概要QML雖然并不需要了解Qt，但你已經(jīng)非常熟悉Qt；那么學(xué)習(xí)并使用QML是非常有必要的。因為一個應(yīng)用程序可以使用QML做用戶界面，非界面邏輯部分可以使用Qt完成。語言島網(wǎng)站 13QML 雜記 Tonkv翻譯熟悉概念QML可以直接訪問Qt如下概念： QAction動作類型 QObject信號與槽在JavaScript里可作為函數(shù) QWidgetQDeclarativeView是一個QML顯示組件 Qt模型直接用于數(shù)據(jù)綁定（QAbstractItemModel）QML

31、項目與Qt組件的比較QML項目與Qt組件非常類似：它們定義的用戶界面外觀。有三種不同類型的QWidget結(jié)構(gòu)： 簡單組件是不能作為父級的（如：QLabel,QCheckBox,QToolButton等等） 父級組件是可以作為其它組件的父級（如：QGroupBox,QStackedWidget,QTabWidget等等） 在內(nèi)部的子級組件的組合組件（如QComboxBox,QSpinBox,QFileDialog,QTabWidget等等）QML項目同樣也可以這樣分類。簡單組件有個非常重要的規(guī)則要記住，在C+實現(xiàn)的QDeclarativeItem是不包含任何界面外觀策略的，這是保留給該項目的QM

32、L用法。舉例說明，假設(shè)你需要一個可重復(fù)使用的按鈕項目。如果你決定聲明一個QDeclarativeItem子類來實現(xiàn)一個按鈕，就像QoTo lButton是QWidget的子樣一樣。如上面所述的規(guī)則那樣，QDeclarativeButton的沒有任何界面外觀，只是啟用概念，觸發(fā)等等。但在Qt里已經(jīng)有一個對象做這件事：QAction。QAction是QPushButton,QCheckB ox,QMenu項目，QoTo lButton以及其它可視組件的UI本質(zhì)無關(guān)，通常綁定一個QAction。因此，在QML已經(jīng)完成了實現(xiàn)一個抽象這就是QAction。一個按鈕界面行為的外觀，狀態(tài)間的轉(zhuǎn)變以及如何響應(yīng)

33、鼠標(biāo)、鍵盤或觸摸輸入都應(yīng)留在QML里定義。QDeclarative eTxtEdit是基于QeTx tControl，QDeclarative WebView是基于Q Web Pageand ListView uses QAbstractItemModel, just as QeTx tEdit, QWebVie w, and QListView arebuilt upon those same UI-agnostic components.語言島網(wǎng)站 14QML 雜記 Tonkv翻譯QWidget封裝了界面外觀是非常重要的，對QML概念也服務(wù)同一目的。如果你開發(fā)一個完整的應(yīng)用程序，應(yīng)用有一致

34、的界面外觀。你應(yīng)該構(gòu)建可以重用的組件集。所以你要實現(xiàn)一個可以重復(fù)使用的按鈕，只需簡單的構(gòu)建一個QML組件即可。父級組件有時候需要把界面分成幾大類，每個類放任意個其它的部分。QaTbWidget就提供一個多“頁面“的界面，在任何時間只能切換到其中一個頁面。一個QScollAred提供一個滾動條來擴大界面有效空間。幾乎所有的組件都可以直接在QML創(chuàng)建。只有少數(shù)情況下，需要非常特殊的事情處理，例如Filckable需要C+完成。QML相較于Qt組件的父級概念是有顯著差異的，子級項目是定位相對于它們的父級，在這里沒有需要它們被整個包含到父級。這種差異影響是深遠的，例如： 圍繞組件的陰影或高亮可能是該組

35、件的子級。 粒子效果可以流到對象范圍以外。 變換動畫可以通過移動項目超出屏幕外來達到”隱藏“項目的目的。組合組件有些組件通過包含其它組件提供”實現(xiàn)細節(jié)“的功能。例如QSpinBox 是一個行編輯與兩個增加/減少值的按鈕。QFileDialog使用了一大堆組件來為用戶提供一個尋找與選擇一個文件名的方式。在開發(fā)可重復(fù)使用的QML項目時；你可以選擇做同樣的事情：構(gòu)建你已經(jīng)定義的其它項目組成一個項目。唯一要考慮是你構(gòu)建的復(fù)合組件是用戶期望的那樣動畫與變換。例如一個微調(diào)框可能需要從任意文本或字符項目平常的過渡，因此微調(diào)框項目需要足夠的靈活性，允許這樣的動畫。QML項目與QGraphicsWidgets比

36、較QML項目與QGraphicsWidgets之間主要區(qū)別是如何使用。技術(shù)實現(xiàn)細節(jié)大致相同；但實際上它們是不同的，因為QML項目需要聲明與合成使用，QGraphicsWidgets是更為整合的使用。QML項目與QGraphicsWidgets都繼續(xù)自QGraphicsObject，可以并存。差別是布局系統(tǒng)與其它組件的接口。如QGraphicsWidgets趨向于將所有功能集為一身，一個QGraphicsWidgets可能有多個獨立的QML文件交叉許多QML項目組合而成的；但它仍然被C+載入與使用作為單個QGraphicsObject。語言島網(wǎng)站 15QML 雜記 Tonkv翻譯QGraphic

37、sWidgets是設(shè)計為被QGraphicsLayouts布局的。QML則不使用QGraphicsLayouts，由于Qt的布局器不能混合動畫與流體界面；所以幾何體界面是主要差別之一。當(dāng)編寫QML元素時；可以使設(shè)計人員能夠使用絕對的幾何體，綁定或錨來放置它們的邊界矩形并不使用布局或尺寸伸縮器。如果尺寸適當(dāng)?shù)奶崾荆荒敲丛赒ML文件里放置它們，從而使設(shè)計者知道如何使用項目最好；但仍具有完全的控制界面外觀。其它區(qū)別在于QGraphicsWidgets往往遵循組件模式，它們是一個用戶界面與邏輯的自我包含綁定。與之相反的是QML通常是單一項目，就其本身并不滿足使用的情況。所以當(dāng)編寫QML項目，盡量避免做

38、UI邏輯或項目內(nèi)部合成可視元素；轉(zhuǎn)為編寫更為通用的基元，使外觀（如涉及UI邏輯）被編寫在QML中。兩者間的差別是由于不同的互動方式。QGraphicsWidget是QGraphicsObject子類使C+更容易開發(fā)流體用戶界面。QDeclarativeItem是QGraphicsObject子級使QML開發(fā)流體用戶界面。因此公開界面是主要區(qū)別之一以及使用它來設(shè)計項目（聲明元素用于QML而并QGraphicsWidget，因為你需要編寫自己的界面邏輯到子類）。如果你想同時使用QML與C+來編寫用戶界面，例如：緩進過渡期，建議使用QDeclarativeItem子類（盡管你同樣可以使用QGraph

39、icsWidgets）。以允許更容易使用從c+使根項目的每一個c+組成一個布局器項目、載入單個的QML組件(可能是由多個QML文件,并包含一個獨立的用戶界面和邏輯）到你的場景來替換單獨的QGraphicsWidgets。使用QML程序設(shè)計入門歡迎來到QML，描述性UI語言的世界。在本入門指南中，我們將使用QML創(chuàng)建一個簡單的文本編輯器應(yīng)用程序?？赐瓯局改虾螅銘?yīng)該可以使用QML與Qt C+開發(fā)自己的應(yīng)用程序了。QML構(gòu)建用戶界面這個應(yīng)用程序是一個簡單的文本編輯器，有載入、保存以及一些文本處理操作。本指南包括兩在部分。第一部分將涉及使用QML描述性語言設(shè)計應(yīng)用程序布局與行為。第二部分使用Qt C

40、+完成文件載入與保存功能部分。使用Qt的元對象系統(tǒng)，我們導(dǎo)出C+函數(shù)作為QML元素屬性使用。利用QML與Qt C+我們可以有效的從應(yīng)用程序邏輯中分離出界面邏輯。語言島網(wǎng)站 16QML 雜記 Tonkv翻譯要運行QML范例代碼，使用qmlviewer工具，以QML文件作為參數(shù)來查看。C+部分本教程是假設(shè)讀者具有Qt編程經(jīng)驗的。定義一個按鈕與菜單基本組件按鈕我們開始構(gòu)建文本編輯器上的一個按鈕。功能上，一個按鈕有鼠標(biāo)敏感區(qū)與標(biāo)簽，當(dāng)用戶按下按鈕時，按鈕執(zhí)行操作。在QML里，基本可視元素是矩形元素。矩形元素的屬性來控制元素的外觀與位置。import Qt 4.7語言島網(wǎng)站 17QML 雜記 Tonkv

41、翻譯Rectangle id: simplebuttoncolor: greywidth: 150; height: 75Textid: buttonLabelanchors.centerIn: parenttext: button label首先，impor t Qt 4.7允許qmlviewer工具導(dǎo)入QML元素，這將稍后使用。這一行是每個QML文件必須存在的。注意在impor t語句里Qt模塊的版本_號是被包括的。這個簡單的矩形擁有獨立唯一的標(biāo)識符simplebutton，它是綁定的id屬性。矩形元素的屬性由列表列出的屬性在冒號后面對應(yīng)值。在示例代碼中，矩形的顏色屬性為灰色，同時還決定的

42、矩形的寬度與高度。文本元素是一個不可編輯的文本域。我們命名這個文本元素為buttonLable。要設(shè)置文本域的字符串內(nèi)容，將綁定一個值到該文本屬性。該標(biāo)簽在矩形內(nèi)的中心位置，指定文本元素的錨到父級（simplebutton）。錨可以綁定到其它項目的錨，允許布局簡單分配。我們保存這段代碼為SimpleButton.qml。運行qmlviewer來查看代碼運行的效果。為了實現(xiàn)按鈕的單擊功能，我們可以使用QML的事件處理。QML事件處理是非常類似于Qt的信號與槽機制的。信號發(fā)射并鏈接到槽調(diào)用。Rectangleid:simplebutton.MouseAreaid: buttonMouseAreaa

43、nchors.fill: parent /anchor all sides of the mouse area to the rectangles anchors/onClicked handles valid mouse button clicksonClicked: console.log(buttonLabel.text + clicked )我們包含一個鼠標(biāo)區(qū)域（MouseArea）元素在我們的simplebutton中。鼠標(biāo)區(qū)域元素描述著互動區(qū)，檢測鼠標(biāo)運動。對于我們的按鈕，我們錨定的整個鼠標(biāo)區(qū)是它的父級（simplebutton）區(qū)域。anchors.fill語法是填充指定的區(qū)域內(nèi)

44、部。QML使用錨定來進行項目布局。鼠標(biāo)區(qū)域 有很多的信號處理，就是鼠標(biāo)在指定的鼠標(biāo)區(qū)域邊界內(nèi)移動。它們中有一個是onClicked，它只接受鼠標(biāo)按鈕的單擊。默認(rèn)為左擊。我們可以綁定動作到onClicked句柄上。在我們的例子中，執(zhí)語言島網(wǎng)站 18QML 雜記 Tonkv翻譯行console.log()函數(shù)，當(dāng)鼠標(biāo)單擊該區(qū)域時將輸出控制臺文本，它是用于調(diào)試與輸出文本的有用工具。在simpleButton.qml代碼里只要鼠標(biāo)單擊就會在控制臺輸出文本。Rectangle id:Bperty color buttonColor: lightblueproperty color on

45、HoverColor: goldproperty color borderColor: whitesignal buttonClick()onButtonClick: console.log(buttonLabel.text + clicked )MouseAreaonClicked: buttonClick()hoverEnabled: trueonEntered: parent.border.color = onHoverColoronExited: parent.border.color = borderColor/determines the color of the button b

46、y using the conditional operatorcolor: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor在Button.qml里是一個完整功能的按鈕。在本文中有些代碼被省略，由省略號表示了。因為它們要么在前面章節(jié)有介紹；要么有些是現(xiàn)在不用去涉及的。自定義屬性是使用property類型命名語法聲明的。在該段代碼里，property buttonColor是聲明顏色類型并綁定”lightblue”。buttonColor是稍后用在條件操作中來決定按鈕的填充顏色。注意屬性值使用=等號賦值是有可

47、能的，另外值綁定是使用冒號。自定義屬性允許內(nèi)部項目訪問矩形范圍外的。在這里是基本的QML類型，例如：整型、字符串、實數(shù)型以及變體類型。通過綁定onEntered與onExited信號句柄到顏色，當(dāng)鼠標(biāo)懸停在按鈕上面的時候該按鈕的邊框?qū)⑥D(zhuǎn)變?yōu)辄S色以及當(dāng)鼠標(biāo)退出鼠標(biāo)區(qū)域的時候顏色恢復(fù)。在Button.qml里在 buttonClick()信號名稱前面加一個signal關(guān)鍵字來聲明。所有信號是它們自動創(chuàng)建的處理程序，它們的名稱以on開頭。像onButtonClick是按鈕單擊的事件處理。然后在onButtonClick內(nèi)指定執(zhí)行的動作。在我們按鈕的例子中，onClicked鼠標(biāo)處理程序只是簡單的調(diào)用

48、onButtonClick來顯示一個文本。onButtonClick啟用外面的對象來訪問該按鈕的鼠標(biāo)區(qū)域。例如項目可能聲明了多個MouseArea以及一個buttonClick信號可以使幾個MouseArea信號處理程序很好的區(qū)分。我們現(xiàn)在基本知道在QML里實現(xiàn)項目處理基本的鼠標(biāo)動作。我們在一個矩形內(nèi)部創(chuàng)建一個文本標(biāo)簽，自定義它的屬性以及實現(xiàn)響應(yīng)鼠標(biāo)動作的行為。這種在元素內(nèi)創(chuàng)建元素的想法是整個文本編輯器應(yīng)用程序中貫穿的。這個按鈕是沒有什么用的，除非作為一個組件來執(zhí)行一個動作。在下一節(jié)中，我們將創(chuàng)建一個菜單來包含幾個這樣的按鈕。語言島網(wǎng)站 19QML 雜記 Tonkv翻譯下面的代碼是我完善好的，

49、書的例子代碼并不完整。import Qt 4.7Rectangle id:buttonwidth: 150height: 75radius: 10border.width: 2property color buttonColor: lightblueproperty color onHoverColor: goldproperty color borderColor: whiteproperty string label:signal buttonClick()onButtonClick: console.log(buttonLabel.text + clicked )Textid: butt

50、onLabelanchors.centerIn: parenttext: labelMouseAreaid:buttonMouseAreaanchors.fill: parentonClicked: buttonClick()hoverEnabled: trueonEntered: parent.border.color = onHoverColoronExited: parent.border.color = borderColor/determines the color of the button by using the conditional operatorcolor: butto

51、nMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor創(chuàng)建一個菜單頁面到這一個階段，我們介紹了在一個QML文件中如何創(chuàng)建元素以及指定行為。在本節(jié)中，我們將介紹如何導(dǎo)入QML元素以及如何重新使用一些創(chuàng)建的組件來構(gòu)建其它的組件。菜單顯示了一個列表的內(nèi)容，每個項目有能力執(zhí)行一個動作。在QML里，我們有幾種方式來創(chuàng)建菜單。首先我們將創(chuàng)建一個菜單來包含幾個執(zhí)行不同動作的按鈕。該菜單代碼是FileMenu.qml文件里。import Qt 4.7 /import the main Qt QML moduleimport folderNa

52、me /import the contents of the folderimport script.js as Script /import a Javascript file and name it as Script語言島網(wǎng)站 20QML 雜記 Tonkv翻譯上面的語句顯示了如何使用impor t關(guān)鍵字。這里需要使用Ja vaScript文件或QML文件，這些文件沒有在同一目錄內(nèi)。Button.qml與FIleMenu.qml在同一目錄內(nèi)，我們不需要導(dǎo)入Button.qml文件來使用它。我們可以直接通過聲明Button來直接創(chuàng)建一個按鈕。類似于Rectange那樣聲明。In FileMenu.qml:Rowanchors.centerIn: parentspacing: parent.width/6Buttonid: loadButtonbuttonColor: lightgreylabel: LoadButtonbuttonColor: greyid: saveButtonlabel: SaveButtonid: exitButtonlabel: ExitbuttonColor: darkgreyonButtonClick: