qml Item 元素

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
        }
    }
}