可视化类型
矩形类型
对于最基础的可视化元素， Qt Quick 提供了Rectangle 类型来绘制矩形。这些矩形可以使用纯色或垂直渐变填充颜色。Rectangle 类型还可以为矩形绘制边框。
若要绘制矩形以外的自定义形状，请参阅Canvas 类型，或使用Image 类型显示预渲染的图像。
import QtQuick
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"
}
}
Image 类型
Qt Quick 提供了一个Image 类型，可用于显示图像。Image 类型具有一个source 属性，其值可以是远程或本地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 Multimedia 模块。
共享视觉属性
由 Qt Quick 提供的所有视觉项均基于“项”类型，该类型为视觉项提供了一组通用属性，包括不透明度和变换属性。
不透明度和可见性
Qt Quick 提供的QML对象类型内置了对opacity 的支持。不透明度可通过动画实现，从而实现向透明状态或从透明状态平滑过渡。可见性也可通过visible 属性更高效地管理，但代价是无法对其进行动画处理。
import QtQuick
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"
}
}
}
变换
Qt Quick 类型内置了对变换的支持。若需对视觉内容进行旋转或缩放，可设置Item::rotation 或Item::scale 属性。这些属性同样支持动画效果。
import QtQuick
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"
}
}
有关更复杂的变换，请参阅Item::transform 属性。
© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
