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的帮助文档