QML中Rectangle QML的透明度、旋轉、縮放、漸變及Animation and Transitions

子模型也是QML的特點之一。這裏最值得一提的還是Rectangle這個item，因爲他的用處很廣泛。他可以用來對某個區域進行操作和繪製。比如你要在特定的地方指定接收鼠標單擊事件，或者某個地方顯示特定的顏色。

簡單看一看Rectangle的一些屬性。

[cpp] view plain copy
在CODE上查看代碼片派生到我的代碼片

import QtQuick 2.3  
import QtQuick.Window 2.2  

Window {  
    visible: true  
    Rectangle{  
        x:10//這裏的座標是相對於它的父窗口，也就是Window  
        y:10  
        width: 100;  
        height: 100;//一定要指定出大小才能顯示  
        visible: true  
        antialiasing: true;//抗鋸齒，默認就是開啓的  
        border.width: 10;  
        border.color: "red";//邊框的一些屬性  
        color: "blue"//內部的顏色  
        gradient: Gradient{//顏色漸變  
            GradientStop { position: 0.0; color: "lightsteelblue" }  
            GradientStop { position: 1.0; color: "blue" }  
        }  
        radius: 10;//圓角  
        clip:true//這一屬性設置表示如果他的子類超出了範圍，那麼就剪切掉，不讓他顯示和起作用  
        Rectangle{  
            id:son  
            x:50;  
            y:50;  
            width: 300;  
            height: 100;  
            color: "gray";  
        }  
    }  
}  

針對clip屬性做特殊說明：

Clip屬性設置爲clip:true的效果：

子類是不是被切割了呢。

再看一下設置爲clip:false的情況：

這樣，超出的部分也會被顯示出來。

而更加不幸的是默認居然是false，所以千萬要注意。

當然，這裏有一個問題，就是我要怎麼繪製一個不規則的區域呢？比如六邊形的區域？留下懸念吧……

QML的透明度、旋轉、縮放、漸變及Animation and Transitions
1、 QML的透明深度屬性：opacity，當opacity的值爲0時，表示完全透明，介於0~1之間時，實現的效果爲UI蒙上了一層陰影（自己理解爲陰影），當opacity的值爲1時，表示完全不透明，即沒有任何的變化。
代碼如下：

Rectangle    {
opacity:0.5//透明度爲0.5
color:"red"
y:400;width:100;height:100
Rectangle {
x:50;y:50
width:100;height:100
color:"blue"
}
}

複製代碼
2、 QML的旋轉屬性：rotation設置爲順時針旋轉，後面的參數值爲旋轉的度數。
代碼如下：

Rectangle    {
opacity:0.5
color:"red"
y:400;width:100;height:100
Rectangle {
x:50;y:50
width:100;height:100
color:"blue"
rotation:30//順時針旋轉30度。
smooth:true
}
}

複製代碼

3、 QML的縮放屬性：scale爲設置縮放屬性，scale值小於1，表示縮小，等於1表示無變化，大於1表示放大。
代碼如下：

Rectangle {
color:"lightgray"
width:100;height:100
y:400;x:290
Rectangle {
color:"green"
width:25;height:25
}
Rectangle {
color:"yellow"
x:25;y:25;width:50;height:50
scale:1.5//放大1.5倍。
transformOrigin:Item.TopLeft
}
}

複製代碼

4、 設置旋轉和縮放時注意：
就是我們縮放和旋轉時時基於那個點或者線來實現的？
這個可以使用transformOrigin屬性來設置，該屬性的取值爲：TopLeft、Top、TopRight、Left、Center、Right、BottomLeft、Bottom、BottomRight。
5、 QML的漸變屬性：gradient，漸變分爲水平漸變和豎直漸變，QML默認爲豎直漸變，當需要水平漸變時，可以將所繪製的漸變圖象旋轉90或者270度就可以。
代碼如下：
// 豎直漸變

Rectangle {
x:120;width:100;height:100
gradient:Gradient {
GradientStop {position:0.0;color:"lightgreen"}
GradientStop {position:1.0;color:"lightgray"}
}        
}
// 水平漸變
Rectangle {
x:120;width:100;height:100
gradient:Gradient {
GradientStop {position:0.0;color:"lightgreen"}
GradientStop {position:1.0;color:"lightgray"}
}
rotation:90
}
}

複製代碼

6、Animation and Transitions
1）SequentialAnimation 執行連續的動畫。
代碼如下：

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 }
     }
}

複製代碼

2) ParallelAnimation 並聯運行動畫
代碼如下：

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 }
     }
}

複製代碼

3) NumberAnimation 數值動畫
代碼如下：

Rectangle {
     width: 100; height: 100
     color: "red"

     NumberAnimation on x { to: 50; duration: 1000 }
}

複製代碼

4) ColorAnimation 顏色動畫
代碼如下：

Rectangle {
     width: 100; height: 100
     color: "red"

     ColorAnimation on color { to: "yellow"; duration: 1000 }
}

複製代碼

5) RotationAnimation 旋轉動畫
代碼如下：

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" }
}

複製代碼

還有如Behavior、ParallelAnimation、PropertyAnimation、Vector3dAnimation、ParentAnimation、AnchorAnimationt等，這裏就不多做介紹，可以查看QT SDK的幫助文檔