子模型也是QML的特點(diǎn)之一。這里最值得一提的還是Rectangle這個(gè)item，因?yàn)樗挠锰幒軓V泛。他可以用來對某個(gè)區(qū)域進(jìn)行操作和繪制。比如你要在特定的地方指定接收鼠標(biāo)單擊事件，或者某個(gè)地方顯示特定的顏色。
簡單看一看Rectangle的一些屬性。
[cpp] view plain copy 在CODE上查看代碼片派生到我的代碼片
import QtQuick 2.3 import QtQuick.Window 2.2 Window { visible: true Rectangle{ x:10//這里的坐標(biāo)是相對于它的父窗口，也就是Window y:10 width: 100; height: 100;//一定要指定出大小才能顯示 visible: true antialiasing: true;//抗鋸齒，默認(rèn)就是開啟的 border.width: 10; border.color: "red";//邊框的一些屬性 color: "blue"http://內(nèi)部的顏色 gradient: Gradient{//顏色漸變 GradientStop { position: 0.0; color: "lightsteelblue" } GradientStop { position: 1.0; color: "blue" } } radius: 10;//圓角 clip:true//這一屬性設(shè)置表示如果他的子類超出了范圍，那么就剪切掉，不讓他顯示和起作用 Rectangle{ id:son x:50; y:50; width: 300; height: 100; color: "gray"; } } }針對clip屬性做特殊說明：
Clip屬性設(shè)置為clip:true的效果：
子類是不是被切割了呢。
再看一下設(shè)置為clip:false的情況：
這樣，超出的部分也會(huì)被顯示出來。
而更加不幸的是默認(rèn)居然是false，所以千萬要注意。
當(dāng)然，這里有一個(gè)問題，就是我要怎么繪制一個(gè)不規(guī)則的區(qū)域呢？比如六邊形的區(qū)域？留下懸念吧……
QML的透明度、旋轉(zhuǎn)、縮放、漸變及Animation and Transitions 1、 QML的透明深度屬性：opacity，當(dāng)opacity的值為0時(shí)，表示完全透明，介于0~1之間時(shí)，實(shí)現(xiàn)的效果為UI蒙上了一層陰影（自己理解為陰影），當(dāng)opacity的值為1時(shí)，表示完全不透明，即沒有任何的變化。 代碼如下：
Rectangle {opacity:0.5//透明度為0.5color:"red"y:400;width:100;height:100Rectangle {x:50;y:50width:100;height:100color:"blue"}}復(fù)制代碼 2、 QML的旋轉(zhuǎn)屬性：rotation設(shè)置為順時(shí)針旋轉(zhuǎn)，后面的參數(shù)值為旋轉(zhuǎn)的度數(shù)。 代碼如下：
Rectangle {opacity:0.5color:"red"y:400;width:100;height:100Rectangle {x:50;y:50width:100;height:100color:"blue"rotation:30//順時(shí)針旋轉(zhuǎn)30度。smooth:true}}復(fù)制代碼
3、 QML的縮放屬性：scale為設(shè)置縮放屬性，scale值小于1，表示縮小，等于1表示無變化，大于1表示放大。 代碼如下：
Rectangle {color:"lightgray"width:100;height:100y:400;x:290Rectangle {color:"green"width:25;height:25}Rectangle {color:"yellow"x:25;y:25;width:50;height:50scale:1.5//放大1.5倍。transformOrigin:Item.TopLeft}}復(fù)制代碼
4、 設(shè)置旋轉(zhuǎn)和縮放時(shí)注意： 就是我們縮放和旋轉(zhuǎn)時(shí)時(shí)基于那個(gè)點(diǎn)或者線來實(shí)現(xiàn)的？ 這個(gè)可以使用transformOrigin屬性來設(shè)置，該屬性的取值為：TopLeft、Top、ToPRight、Left、Center、Right、BottomLeft、Bottom、BottomRight。 5、 QML的漸變屬性：gradient，漸變分為水平漸變和豎直漸變，QML默認(rèn)為豎直漸變，當(dāng)需要水平漸變時(shí)，可以將所繪制的漸變圖象旋轉(zhuǎn)90或者270度就可以。 代碼如下： // 豎直漸變
Rectangle {x:120;width:100;height:100gradient:Gradient {GradientStop {position:0.0;color:"lightgreen"}GradientStop {position:1.0;color:"lightgray"}} }// 水平漸變Rectangle {x:120;width:100;height:100gradient:Gradient {GradientStop {position:0.0;color:"lightgreen"}GradientStop {position:1.0;color:"lightgray"}}rotation:90}}復(fù)制代碼
6、Animation and Transitions 1）SequentialAnimation 執(zhí)行連續(xù)的動(dòng)畫。 代碼如下：
Rectangle { id: rect width: 100; height: 100 color: "red" SequentialAnimation { running: true NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 } NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 } }}復(fù)制代碼
2) ParallelAnimation 并聯(lián)運(yùn)行動(dòng)畫 代碼如下：
Rectangle { id: rect width: 100; height: 100 color: "red" ParallelAnimation { running: true NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 } NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 } }}復(fù)制代碼
3) NumberAnimation 數(shù)值動(dòng)畫 代碼如下：
Rectangle { width: 100; height: 100 color: "red" NumberAnimation on x { to: 50; duration: 1000 }}復(fù)制代碼
4) ColorAnimation 顏色動(dòng)畫 代碼如下：
Rectangle { width: 100; height: 100 color: "red" ColorAnimation on color { to: "yellow"; duration: 1000 }}復(fù)制代碼
5) RotationAnimation 旋轉(zhuǎn)動(dòng)畫 代碼如下：
Item { width: 300; height: 300 Rectangle { id: rect width: 150; height: 100; anchors.centerIn: parent color: "red" smooth: true states: State { name: "rotated" PropertyChanges { target: rect; rotation: 180 } } transitions: Transition { RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise } } } MouseArea { anchors.fill: parent; onClicked: rect.state = "rotated" }}復(fù)制代碼
還有如Behavior、ParallelAnimation、PropertyAnimation、Vector3dAnimation、ParentAnimation、AnchorAnimationt等，這里就不多做介紹，可以查看QT SDK的幫助文檔
新聞熱點(diǎn)
疑難解答
