子模型也是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.5color:"red"y:400;width:100;height:100Rectangle {x:50;y:50width:100;height:100color:"blue"}}复制代码 2、 QML的旋转属性：rotation设置为顺时针旋转，后面的参数值为旋转的度数。 代码如下：
Rectangle {opacity:0.5color:"red"y:400;width:100;height:100Rectangle {x:50;y:50width:100;height:100color:"blue"rotation:30//顺时针旋转30度。smooth:true}}复制代码
3、 QML的缩放属性：scale为设置缩放属性，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}}复制代码
4、 设置旋转和缩放时注意： 就是我们缩放和旋转时时基于那个点或者线来实现的？ 这个可以使用transformOrigin属性来设置，该属性的取值为：TopLeft、Top、ToPRight、Left、Center、Right、BottomLeft、Bottom、BottomRight。 5、 QML的渐变属性：gradient，渐变分为水平渐变和竖直渐变，QML默认为竖直渐变，当需要水平渐变时，可以将所绘制的渐变图象旋转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}}复制代码
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的帮助文档
新闻热点
疑难解答
