QML非常經(jīng)典的代碼

1、1.介紹QML是一種描述語言，主要是對界面效果等的一種描述，它可以結(jié)合javaScript來進(jìn)行更復(fù)雜的效果及邏輯實現(xiàn)。比如做個游戲，實現(xiàn)一些更有趣的功能等2.簡單的例子import Qt 4.7Rectanglewidth:200height:200color:"blue"代碼是繪制一個藍(lán)色的矩形，寬200高200，import包含一個qt4.7的包3.基本元素的介紹（自己翻譯意思會有出入，敬請見諒）基本可視化項Item基本的項元素 在QML中所有可視化的向都繼承他Rectangle基本的可視化矩形元素Gradient定義一個兩種顏色的漸變過程GradientStop定義

2、個顏色，被Gradient使用Image在場景中使用位圖BorderImage(特殊的項)定義一張圖片并當(dāng)做邊界AnimatedImage為播放動畫存儲一系列的幀Text在場景中使用文本TextInput顯示可編輯為文本IntValidator int驗證器DoubleValidator double驗證器RegExpValidator驗證字符串正則表達(dá)式TextEdit顯示多行可編輯文本基本的交互項MouseArea鼠標(biāo)句柄交互FocusScope鍵盤焦點句柄Flickable提供一種瀏覽整張圖片的一部分的效果,具體看例子Flipable提供一個平面，可以進(jìn)行翻轉(zhuǎn)看他的前面或后面,具體看例子

3、狀態(tài)State定義一個配置對象和屬性的集合PropertyChanges使用一個State描述屬性的改變StateGroup包含一個狀態(tài)集合和狀態(tài)變換ParentChange重新定義父集，也就是換個父節(jié)點AnchorChanges在一個狀態(tài)中改變anchors動畫和變換Behavior默認(rèn)的屬性變換動畫SequentialAnimation對定義的動畫串行播放ParallelAnimation對定義的動畫并行播放PropertyAnimation屬性變換動畫NumberAnimation對實數(shù)類型屬性進(jìn)行的動畫Vector3dAnimation對QVector3d進(jìn)行的屬性ColorAnima

4、tion顏色進(jìn)行的變換動畫RotationAnimation對旋轉(zhuǎn)進(jìn)行的變換動畫ParentAnimation對父節(jié)點進(jìn)行變換的動畫，改變綁定的父節(jié)點AnchorAnimation對anchor進(jìn)行改變的動畫PauseAnimation延遲處理SmoothedAnimation允許屬性平滑的過度SpringAnimation一種加速的效果PropertyAction允許在動畫過程中對屬性的直接改變ScriptAction允許動畫過程中調(diào)用腳本Transition在狀態(tài)變換中加入動作變化工作中的數(shù)據(jù)Binding在創(chuàng)建的時候綁定一些數(shù)據(jù)到一些屬性ListModel定義鏈表數(shù)據(jù)ListElemen

5、t定義ListModel的一個數(shù)據(jù)項VisualItemModel包含可視化項(visual items)到一個view中，相當(dāng)是一個容器VisualDataModel包含一個model和一個delegate，model包含需要的數(shù)據(jù)，delegate設(shè)計顯示的項的信息，具體的去看例子Package他的目的是把VisualDataModel共享給多個view，具體還要學(xué)習(xí)XmlListModel特殊的一個模式使用XPath表達(dá)式，使用xml來設(shè)置元素，參考例子XmlRole XmlListModel的一個特殊的角色試圖ListView提供一個鏈表顯示模型試圖GridView提供一個網(wǎng)格顯示模型

6、試圖PathView提供一個內(nèi)容沿著路徑來顯示的模型Path定義一個PathView使用的軌跡PathLine定義一個線性的軌跡PathQuad定義一個二次貝塞爾曲線的軌跡PathCubic定義一個三次貝塞爾曲線的軌跡PathAttribute允許綁定一個屬性上，具體看例子PathPercent修改item分配的軌跡不是很明了其中的意思WebView允許添加網(wǎng)頁內(nèi)容到一個canvas上定位器Column整理它的子列(縱)Row整理它的子行(橫)Grid設(shè)置它的子到一個網(wǎng)格上Flow目的是不讓他的子項重疊在一起實用Connections明確連接信號和信號句柄Component封裝QML item

7、s想一個組件一樣Timer提供時間觸發(fā)器QtObject基本的元素只包含objectName屬性Qt qml全局Qt object提供使用的枚舉和函數(shù)WorkerScript允許在QML使用線程Loader控制載入item或組件Repeater使用一個模型創(chuàng)建多個組件SystemPalette為Qt palettes提供一個通道FontLoader載入字體根據(jù)名字或URLLayoutItem允許聲明UI元素插入到qtGraphicsView布局中變換Scale分派item縮放行為Rotation分派item旋轉(zhuǎn)行為Translate分派item移動行為4.基本元素的使用例子1. 位置是0,0寬

8、高分別是200Item x: 0; y: 0;width: 200; height: 200;2. 位置是：0,0寬高分別是200，顏色是紅色Rectangle x: 0; y: 0;width: 200; height: 200;color: "red"3.分別在總高度的0顏色紅色 總高度的1/3黃色 總高度的1是綠色Rectanglewidth:100;height:100gradient:GradientGradientStopposition:0.0;color:"red"GradientStopposition:0.33;color:"

9、;yellow"GradientStopposition:1.0;color:"green"4.設(shè)置一張圖片Image source: "./Images/button1.png"5.他將一張圖片分成9部分當(dāng)圖片進(jìn)行縮放的時候A1 3 7 9位置的都不會進(jìn)行縮放B. 2 8將根據(jù)屬性horzontalTileMode進(jìn)行縮放C4 6將根據(jù)屬性verticalTileMode進(jìn)行縮放D5將根據(jù)屬性horzontalTileMode和verticalTileMode進(jìn)行縮放BorderImage width: 180; height: 180/ 分

10、割19塊的4個點是根據(jù)border設(shè)置的坐標(biāo)來實現(xiàn)的/ 本別是距離坐標(biāo) 上邊 右邊 下邊的距離border left: 30; top: 30; right: 30; bottom: 30 horizontalTileMode: BorderImage.StretchverticalTileMode: BorderImage.Stretchsource: "./Images/button1.png"6.主要用于播放gif圖片Rectangle width: animation.width; height: animation.height + 8AnimatedImage

11、id: animation; source: "animation.gif" Rectangle property int frames: animation.frameCountwidth: 4; height: 8x: (animation.width - width) * animation.currentFrame / framesy: animation.heightcolor: "red"7.顯示文本(具體的其他設(shè)置請看文檔)Texttext:"text"8.下面是設(shè)置一個輸入文本框，框中的字符串是Text,并設(shè)置鼠標(biāo)可以

12、選擇文本TextInputtext:"Text"selectByMouse:true;/鼠標(biāo)可以選擇9int型驗證器，和輸入框結(jié)合后就是只能輸入整型數(shù)據(jù)TextInput/最高可以輸入100，最低輸入10IntValidatorid:intval;bottom:10;top:100;width:100;height:20;text:""/使用校驗器validator:intval;10.只能輸入浮點數(shù)TextInput/最高可以輸入100，最低輸入10decimals最多有多少位小數(shù)/notation表示是使用科學(xué)計數(shù)法還是(默認(rèn)),還是直接的小數(shù)當(dāng)獲取

13、里面的數(shù)據(jù)DoubleValidatorid:intval;decimals:4;bottom:10;top:100;notation:DoubleValidator.StandardNotationwidth:100;height:20;text:""/使用校驗器validator:intval;11.使用正則表達(dá)式TextInput/使用一個正則表達(dá)式來控制輸入的字符串/a-zA-Z10-10,2a-z1,3$/表示開始位置必須是一個大寫或小寫字母/接下來是02個的數(shù)字而且是0或1，在接下來是13個的小寫字母RegExpValidatorid:intval;regExp

14、:/a-zA-Z10-10,2a-z1,3$/;width:100;height:20;text:""/使用校驗器validator:intval;12.顯示一段hello world的html文本和相同TextEdit width: 240text: "<b>Hello</b> <i>World!</i>"font.family: "Helvetica"font.pointSize: 20color: "blue"focus: true13.主要是用來判斷鼠標(biāo)事件的

15、區(qū)域Rectanglex: 0; y: 0;width: 100; height:100;Rectangleid: mousrectx: 20; y: 20;width: 20; height: 20;color: "blue"MouseArea/ 使用父的區(qū)域作為鼠標(biāo)判斷的區(qū)域及 x: 20; y: 20; width: 20; height: 20;anchors.fill: parent;/ 但鼠標(biāo)按下后 mousrect變成紅色，當(dāng)鼠標(biāo)松開后變成藍(lán)色onPressed: mousrect.color = "red"onReleased: mous

16、rect.color = "blue"14.不是很清楚說的什么，好像是說同一個時刻只有一個item有焦點15.顯示一個200x200的框，框中顯示圖片上200x200的部分Flickable width: 200; height: 200/ 設(shè)置使用圖片的寬 高，而現(xiàn)實的是 200x200的現(xiàn)實框contentWidth: image.width; contentHeight: image.heightImage id: image; source: "./Images/need.png" 16.包含兩個面，一個前面，一個后面，實現(xiàn)一個控件前后的翻轉(zhuǎn)效果

17、，并且在后面可以添加一些控制Flipable id: flipablewidth: 240height: 240property int angle: 0property bool flipped: falsefront: Image source: "front.png" / 前面back: Image source: "back.png" / 后面/ 旋轉(zhuǎn)動畫 前后面交換transform: Rotation origin.x: flipable.width/2; origin.y: flipable.height/2axis.x: 0; axis.

18、y: 1; axis.z: 0 / rotate around y-axisangle: flipable.anglestates: State name: "back"PropertyChanges target: flipable; angle: 180 when: flipable.flippedtransitions: Transition NumberAnimation properties: "angle" duration: 1000 MouseArea anchors.fill: parentonClicked: flipable.fli

19、pped = !flipable.flipped17./ 當(dāng)鼠標(biāo)按下后改變 myRect 的顏色Rectangle id: myRectwidth: 100; height: 100color: "black"MouseArea id: mouseAreaanchors.fill: parentonClicked: myRect.state = 'clicked' ? myRect.state = "" : myRect.state = 'clicked'/ 設(shè)置狀態(tài)states: State name: "cl

20、icked"PropertyChanges target: myRect; color: "red" 18./ 當(dāng)鼠標(biāo)按下后改變狀態(tài)/ 狀態(tài)里面的屬性改變包含了文本和顏色的改變Text id: myTextwidth: 100; height: 100text: "Hello"color: "blue"states: State name: "myState"/ 當(dāng)這個狀態(tài)被設(shè)置的時候，將改變myText的文本和顏色PropertyChanges target: myTexttext: "Goo

21、dbye"color: "red"MouseArea anchors.fill: parent; onClicked: myText.state = 'myState' 19.一個狀態(tài)組中可以包含很多的狀態(tài)和變化，而狀態(tài)也可以和變換綁定.20.在狀態(tài)中可以對腳本中的函數(shù)進(jìn)行調(diào)用/ Sc.jsfunction changeColor() /返回藍(lán)色return "blue"/ test.qmlimport "Sc.js" as CodeRectangleid: rectwidth: 50; height: 50

22、color: "red"MouseArea anchors.fill: parentonClicked: rect.state = "first" /鼠標(biāo)按下改變狀態(tài)states: State name: "first"StateChangeScriptname: "myScript"script: rect.color = Code.changeColor();21.把指定的item換一個item父節(jié)點Item width: 200; height: 100Rectangle id: redRectwidth:

23、100; height: 100color: "red"/ 本來blueRect的父節(jié)點是Item 當(dāng)鼠標(biāo)按下后他被設(shè)置到 redRect上Rectangle id: blueRectx: redRect.widthwidth: 50; height: 50color: "blue"states: State name: "reparented"/ 改變父節(jié)點ParentChange target: blueRect; parent: redRect; x: 10; y: 10 MouseArea anchors.fill: pare

24、nt; onClicked: blueRect.state = "reparented" 22.Rectangle id: windowwidth: 120; height: 120color: "black"Rectangle id: myRect; width: 50; height: 50; color: "red" states: State name: "reanchored"AnchorChanges / 改變 myRect 的anchors屬性target: myRectanchors.top: wi

25、ndow.topanchors.bottom: window.bottomPropertyChanges target: myRectanchors.topMargin: 10anchors.bottomMargin: 10/ 鼠標(biāo)事件MouseArea anchors.fill: parent; onClicked: window.state = "reanchored" 23.Rectangle id: rectwidth: 100; height: 100color: "red"/ 針對寬度的動畫Behavior on width NumberAn

26、imation duration: 1000 MouseArea anchors.fill: parentonClicked: rect.width = 5024.串行播放多個動畫Rectangle id: rect1width: 500; height: 500Rectangleid: rect;color: "red"width: 100; height: 100/ 串行播放多個動畫，先橫向移動，在縱向移動SequentialAnimationrunning: true;NumberAnimation target:rect; properties:"x&qu

27、ot; to: 50; duration: 1000 NumberAnimation target:rect; properties:"y" to: 50; duration: 1000 25.Rectangle id: rect1width: 500; height: 500Rectangleid: rect;color: "red"width: 100; height: 100/ 并行播放動畫，同時橫向和縱向移動ParallelAnimationrunning: true;NumberAnimation target:rect; properties

28、:"x" to: 50; duration: 1000 NumberAnimation target:rect; properties:"y" to: 50; duration: 1000 26.Rectangle id: rectwidth: 100; height: 100color: "red"states: State name: "moved"PropertyChanges target: rect; x: 50 transitions: Transition / 屬性動畫 這里是當(dāng)屬性 x或y發(fā)生變化的

29、時候，就播放這樣一個動畫PropertyAnimation properties: "x,y" easing.type: Easing.InOutQuad MouseAreaanchors.fill: parent;onClicked: rect.state = "moved"27.Rectangle width: 100; height: 100color: "red"/ 對當(dāng)前item的x進(jìn)行移動，目標(biāo)移動到x = 50NumberAnimation on x to: 50; duration: 1000 28.29.顏色的過度R

30、ectangle width: 100; height: 100color: "red"ColorAnimation on color to: "yellow" duration: 1000 30.默認(rèn)是繞z軸進(jìn)行的旋轉(zhuǎn)Item width: 300; height: 300Rectangle id: rectwidth: 150; height: 100; anchors.centerIn: parentcolor: "red"smooth: truestates: State name: "rotated" P

31、ropertyChanges target: rect; rotation: 180 transitions: Transition RotationAnimation duration: 1000; direction: RotationAnimation.Counterclockwise MouseArea anchors.fill: parent; onClicked: rect.state = "rotated" 31.一個切換父節(jié)點的動畫,平滑的過度Itemwidth:200;height:100Rectangleid:redRectwidth:100;heigh

32、t:100color:"red"Rectangleid:blueRectx:redRect.widthwidth:50;height:50color:"blue"states:Statename:"reparented"ParentChangetarget:blueRect;parent:redRect;x:10;y:10transitions:TransitionParentAnimationNumberAnimationproperties:"x,y"duration:1000MouseAreaanchors.

33、fill:parent;onClicked:blueRect.state="reparented"32.Itemid:containerwidth:200;height:200Rectangleid:myRectwidth:100;height:100color:"red"states:Statename:"reanchored"AnchorChangestarget:myRect;anchors.right:container.righttransitions:Transition/smoothlyreanchormyRectand

34、moveintonewpositionAnchorAnimationduration:1000/當(dāng)控件加載完成后Component.onCompleted:container.state="reanchored"33.延遲效果Item id: containerwidth: 200; height: 200Rectangle id: myRectwidth: 100; height: 100color: "red"SequentialAnimation running: true;NumberAnimation target: myRect;to: 50

35、; duration: 1000; properties: "x" PauseAnimation duration: 5000 / 延遲100毫秒NumberAnimation target: myRect; to: 50; duration: 1000; properties: "y" 34.平滑過度Rectangle width: 800; height: 600color: "blue"Rectangle width: 60; height: 60x: rect1.x - 5; y: rect1.y - 5color: &quo

36、t;green"Behavior on x SmoothedAnimation velocity: 200 Behavior on y SmoothedAnimation velocity: 200 Rectangle id: rect1width: 50; height: 50color: "red"focus: trueKeys.onRightPressed: rect1.x = rect1.x + 100Keys.onLeftPressed: rect1.x = rect1.x - 100Keys.onUpPressed: rect1.y = rect1.y

37、 - 100Keys.onDownPressed: rect1.y = rect1.y + 10035.平滑的過度過程，在動畫結(jié)束的時候有種彈性的效果Item width: 300; height: 300Rectangle id: rectwidth: 50; height: 50color: "red"Behavior on x SpringAnimation spring: 2; damping: 0.2 Behavior on y SpringAnimation spring: 2; damping: 0.2 MouseArea anchors.fill: pare

38、ntonClicked: rect.x = mouse.x - rect.width/2rect.y = mouse.y - rect.height/236.主要是在動畫過程中直接的改變一個屬性transitions:Transition.PropertyActiontarget:theImage;property:"smooth"value:true.38.在動畫過程中嵌入腳本的調(diào)用SequentialAnimation NumberAnimation . ScriptAction script: doSomething(); NumberAnimation . 39.R

39、ectangle id: rectwidth: 100; height: 100color: "red"MouseArea id: mouseAreaanchors.fill: parentstates: State name: "moved" when: mouseArea.pressedPropertyChanges target: rect; x: 50; y: 50 transitions: Transition NumberAnimation properties: "x,y" easing.type: Easing.InO

40、utQuad 40.Item width: 300; height: 300Text id: app; text: "xxxfa"TextEdit id: myTextField; text: "Please type here." / 把myTextField和app的enteredText屬性進(jìn)行綁定Binding target: app; property: "enteredText" value: myTextField.text 41.直接看效果Rectanglewidth:200;height:200ListModelid

41、:fruitModelListElementname:"Apple"cost:2.45ListElementname:"Orange"cost:3.25ListElementname:"Banana"cost:1.95Componentid:fruitDelegateRowspacing:10Texttext:nameTexttext:'$'+costListViewanchors.fill:parentmodel:fruitModeldelegate:fruitDelegate42.請參照43.把可視化圖元添加到鏈表

42、試圖Rectangle width: 100; height: 100;VisualItemModel id: itemModelRectangle height: 30; width: 80; color: "red" Rectangle height: 30; width: 80; color: "green" Rectangle height: 30; width: 80; color: "blue" ListView anchors.fill: parentmodel: itemModel44.看下面效果Rectangle w

43、idth: 200; height: 100VisualDataModel id: visualModelmodel: ListModel ListElement name: "Apple" ListElement name: "Orange" delegate: Rectangle height: 25width: 100Text text: "Name: " + nameListView anchors.fill: parentmodel: visualModel45.具體請參考declarative/modelviews/pac

44、kage46.從網(wǎng)絡(luò)獲取xml，暫時沒有測試成功47.參考 48.看效果Rectangle width: 200; height: 400;ListModel id: fruitModelListElement name: "Apple"cost: 2.45ListElement name: "Orange"cost: 3.25ListElement name: "Banana"cost: 1.95GridView anchors.fill: parentmodel: fruitModeldelegate: ColumnText te

45、xt:"name" + nameText text:"cost"+ cost49看例子Rectanglewidth:200;height:400;ListModelid:fruitModelListElementname:"Apple"cost:2.45ListElementname:"Orange"cost:3.25ListElementname:"Banana"cost:1.95PathViewanchors.fill:parentmodel:fruitModeldelegate:Colum

46、nTexttext:"name"+nameTexttext:"cost"+costpath:PathstartX:120;startY:100PathQuadx:120;y:25;controlX:260;controlY:75PathQuadx:120;y:100;controlX:-20;controlY:7550具體的看運行的例子Rectanglewidth:200;height:400;ListModelid:fruitModelListElementname:"Apple"cost:2.45ListElementname:&

47、quot;Orange"cost:3.25ListElementname:"Banana"cost:1.95PathViewanchors.fill:parentmodel:fruitModeldelegate:ColumnTexttext:"name"+nameTexttext:"cost"+costpath:PathstartX:150;startY:120PathLinex:200;y:80;PathLinex:100;y:80;PathLinex:150;y:120;51參考52還要看53可以直接針對一些屬性進(jìn)行改變

48、Rectanglewidth:200;height:400;ListModelid:fruitModelListElementname:"Apple"cost:2.45ListElementname:"Orange"cost:3.25ListElementname:"Banana"cost:1.95PathViewanchors.fill:parentmodel:fruitModeldelegate:Itemid:delitem;width:80;height:80;Column/這里使用圖片試試Rectanglewidth:40;h

49、eight:40;scale:delitem.scale;color:"red"Texttext:"name"+nameTexttext:"cost"+cost/path:PathstartX:120;startY:100PathAttributename:"Scale"value:1.0PathQuadx:120;y:25;controlX:260;controlY:75PathAttributename:"Scale"value:0.3PathQuadx:120;y:100;controlX

50、:-20;controlY:7554具體請看QML文檔55import QtWebKit 1.0WebView url: ""preferredWidth: 490preferredHeight: 400scale: 0.5smooth: false56橫向排列Rectanglewidth: 100; height: 100;/ 縱向排列Column spacing: 2Rectangle color: "red" width: 50; height: 50 Rectangle color: "green" width: 20; he

51、ight: 50 Rectangle color: "blue" width: 50; height: 20 57Rectanglewidth: 100; height: 100;/ 橫向排列Row spacing: 2Rectangle color: "red" width: 50; height: 50 Rectangle color: "green" width: 20; height: 50 Rectangle color: "blue" width: 50; height: 20 58Rectanglew

52、idth:100;height:100;/網(wǎng)格排列Gridcolumns:3spacing:2Rectanglecolor:"red"width:50;height:50Rectanglecolor:"green"width:20;height:50Rectanglecolor:"blue"width:50;height:20Rectanglecolor:"cyan"width:50;height:50Rectanglecolor:"magenta"width:10;height:1059Rec

53、tanglewidth: 100; height: 100;/ 網(wǎng)格排列Flow spacing: 2width: 100; height: 100;Rectangle color: "red" width: 50; height: 50 Rectangle color: "green" width: 20; height: 50 Rectangle color: "blue" width: 50; height: 20 Rectangle color: "cyan" width: 50; height: 50 R

54、ectangle color: "magenta" width: 10; height: 10 60下面是3中情況下會使用的，具體的不好翻譯Multiple connections to the same signal are required有多個連接要連接到相同的信號時Creating connections outside the scope of the signal sender創(chuàng)建的連接在范圍之外Connecting to targets not defined in QML創(chuàng)建的連接沒有在QML中定義的Rectanglewidth: 100; height: 100;MouseArea id: are