QML视觉元素类型
一、概述
对于最基本的视觉效果，Qt Quick提供了一个 Rectangle 类型来绘制矩形。这些矩形可以用颜色或垂直渐变来着色。 Rectangle 还可以在矩形上绘制边框。通过设置border属性，当然可以绘制圆角的，很多QQuick Ctrol 都是用这些rectangle来做的，自定义一些属性也是的。若要绘制矩形以外的自定义形状，请参阅“Canvas”类型 或 使用“Image”类型显示预渲染图像。Canvas 其实就是类似 Qt C++ 里面的 QPainter，可以自定义的绘制一些样式。也是自定义控件或者绘图会使用到的。
import QtQuick 2.3
Item {
width: 320
height: 480
Rectangle {
color: "#272822"
width: 320
height: 480
}
// This element displays a rectangle with a gradient and a border
Rectangle {
x: 160
y: 20
width: 100
height: 100
radius: 8 // This gives rounded corners to the Rectangle
gradient: Gradient {
// This sets a vertical gradient fill
GradientStop {
position: 0.0; color: "aqua" }
GradientStop {
position: 1.0; color: "teal" }
}
border {
width: 3; color: "white" } // This sets a 3px wide black border to be drawn
}
// This rectangle is a plain color with no border
Rectangle {
x: 40
y: 20
width: 100
height: 100
color: "red"
}
}
简单的效果如下图：
一、图像类型
Qt Quick提供了一个Image类型，可以用来显示图像。Image类型有一个source属性，其值可以是远程URL或本地URL，也可以是嵌入在已编译资源文件中的图像文件的URL。
//该元素显示一个图像。因为源是在线的，所以可能需要一些时间来获取
// This element displays an image. Because the source is online, it may take some time to fetch
Image {
x: 40
y: 20
width: 61
height: 73
source: "http://codereview.qt-project.org/static/logo_qt.png"
}
对于更复杂的图像，还有其他类似于Image的类型。BorderImage使用网格缩放绘制图像，适用于用作边界的图像。AnimatedImage播放gif和mng动画图像。AnimatedSprite和SpriteSequence播放由多个相邻存储的非动画图像格式的帧组成的动画。
要显示视频文件和相机上数据，请参阅Qt多媒体模块。
三、共享视觉属性
Qt Quick提供的所有可视项都基于Item类型，该类型为可视项提供了一组公共属性，包括不透明度和转换属性。
1. 不透明度和可见性
Qt Quick提供的QML对象类型内置了对不透明度的支持。opacity 可以被动画化，以允许平滑过渡到或从透明状态。可见性也可以更有效地使用 visible 属性进行管理，但代价是不能对其进行动画化。可见性只有两个状态，不具备中间转换状态。
import QtQuick 2.3
Item {
width: 320
height: 480
Rectangle {
color: "#272822"
width: 320
height: 480
}
Item {
x: 20
y: 270
width: 200
height: 200
MouseArea {
anchors.fill: parent
onClicked: topRect.visible = !topRect.visible
}
Rectangle {
x: 20
y: 20
width: 100
height: 100
color: "red"
}
Rectangle {
id: topRect
opacity: 0.5
x: 100
y: 100
width: 100
height: 100
color: "blue"
}
}
}
2. 转换（转置）
Qt Quick类型有内置的转换支持。如果您希望旋转或缩放可视内容，可以设置 Item::rotation 或 Item::scale 属性。这些也可以被动画化。
import QtQuick 2.3
Item {
width: 320
height: 480
Rectangle {
color: "#272822"
width: 320
height: 480
}
Rectangle {
rotation: 45 // This rotates the Rectangle by 45 degrees
x: 20
y: 160
width: 100
height: 100
color: "blue"
}
Rectangle {
scale: 0.8 // This scales the Rectangle down to 80% size
x: 160
y: 160
width: 100
height: 100
color: "green"
}
}