Item 元素
Item 是 QML 中最基本的可视化组件之一,它是所有可视化组件的基类。
Item 本身不绘制任何内容,但提供了布局、定位和事件处理等基本功能。
import QtQuick 2.15
import QtQuick.Window 2.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")Item {// 基本属性x: 100 // 设置 Item 的 x 坐标,即左上角的水平位置y: 100 // 设置 Item 的 y 坐标,即左上角的垂直位置width: 200 // 设置 Item 的宽度height: 100 // 设置 Item 的高度visible: true // 控制 Item 是否可见,默认为 trueenabled: true // 控制 Item 是否启用,默认为 trueopacity: 0.8 // 设置 Item 的不透明度,范围从 0.0(完全透明)到 1.0(完全不透明)// 布局属性anchors.centerIn: parent // 将 Item 居中对齐到父组件anchors.fill: parent // 使 Item 填充父组件anchors.left: parent.left // 将 Item 的左边缘对齐到父组件的左边缘anchors.right: parent.right // 将 Item 的右边缘对齐到父组件的右边缘anchors.top: parent.top // 将 Item 的上边缘对齐到父组件的上边缘anchors.bottom: parent.bottom // 将 Item 的下边缘对齐到父组件的下边缘anchors.horizontalCenter: parent.horizontalCenter // 将 Item 的水平中心对齐到父组件的水平中心anchors.verticalCenter: parent.verticalCenter // 将 Item 的垂直中心对齐到父组件的垂直中心// 事件处理属性focus: true // 控制 Item 是否获得焦点,获得焦点的 Item 可以接收键盘事件hoverEnabled: true // 控制 Item 是否启用悬停事件,启用后可以接收鼠标悬停事件// 其他属性z: 1 // 设置 Item 的堆叠顺序,数值越大,Item 越靠近用户clip: true // 控制 Item 是否裁剪其子组件,设置为 true 时,超出 Item 边界的子组件部分将被裁剪transform: [ // 用于对 Item 进行变换(如旋转、缩放、平移等)Rotation { angle: 45 } // 旋转 45 度Scale { x: 2; y: 2 } // 放大 2 倍Translate { x: 10; y: 10 } // 平移 10 像素]// 子组件Rectangle {width: 100 // 设置 Rectangle 的宽度height: 100 // 设置 Rectangle 的高度color: "red" // 设置 Rectangle 的颜色为红色anchors.centerIn: parent // 将 Rectangle 居中对齐到父 Item// 边框属性border.color: "black" // 设置 Item 的边框颜色border.width: 1 // 设置 Item 的边框宽度radius: 5 // 设置 Item 的圆角半径gradient: Gradient { // 设置 Item 的渐变色GradientStop { position: 0.0; color: "red" }GradientStop { position: 1.0; color: "blue" }}}Text {text: "Hello, Item!" // 设置 Text 的文本内容为 "Hello, Item!"anchors.top: parent.bottom // 将 Text 定位到父 Item 的底部anchors.horizontalCenter: parent.horizontalCenter // 将 Text 水平居中对齐到父 Item}}
}