Item 元素
Item 是 QML 中最基本的可视化组件之一,它是所有可视化组件的基类。
Item 本身不绘制任何内容,但提供了布局、定位和事件处理等基本功能。
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Item {
// 基本属性
x: 100 // 设置 Item 的 x 坐标,即左上角的水平位置
y: 100 // 设置 Item 的 y 坐标,即左上角的垂直位置
width: 200 // 设置 Item 的宽度
height: 100 // 设置 Item 的高度
visible: true // 控制 Item 是否可见,默认为 true
enabled: true // 控制 Item 是否启用,默认为 true
opacity: 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
}
}
}