qml Grid 详解

1. 概述

Grid 是 QML 中用于将子项排列成网格布局的容器。它将子项按行和列的方式排列，可以指定每行和每列的宽度和高度。Grid 是 QtQuick.Layouts 模块的一部分，提供了灵活的布局管理功能。

2. 重要属性

• columns: 指定网格的列数。
• rows: 指定网格的行数。
• flow: 指定子项的排列方向，可以是 Grid.LeftToRight 或 Grid.TopToBottom。
• spacing: 子项之间的间距。
• padding: 内边距，即子项与 Grid 边缘之间的距离。
• width: Grid 的宽度。
• height: Grid 的高度。
• visible: 控制 Grid 是否可见。
• enabled: 控制 Grid 及其子项是否启用。
• clip: 控制是否裁剪超出 Grid 边缘的内容。

3. 重要方法

• forceLayout(): 强制重新计算布局。

4. 重要信号

• layoutChanged(): 当布局发生变化时发出。

5. 常用枚举类型

• Grid.Flow: 包含子项排列方向的枚举类型，如 Grid.LeftToRight, Grid.TopToBottom。

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    Grid {
        id: grid
        anchors.centerIn: parent
        rows: 3
        columns: 3
        spacing: 10
        rowSpacing: 20
        columnSpacing: 15

        Rectangle {
            width: 100
            height: 100
            color: "red"
            Text {
                anchors.centerIn: parent
                text: "Item 1"
                color: "white"
            }
        }

        Rectangle {
            width: 100
            height: 100
            color: "green"
            Text {
                anchors.centerIn: parent
                text: "Item 2"
                color: "white"
            }
        }

        Rectangle {
            width: 100
            height: 100
            color: "blue"
            Text {
                anchors.centerIn: parent
                text: "Item 3"
                color: "white"
            }
        }

        Rectangle {
            width: 100
            height: 100
            color: "yellow"
            Text {
                anchors.centerIn: parent
                text: "Item 4"
                color: "black"
            }
        }

        Rectangle {
            width: 100
            height: 100
            color: "purple"
            Text {
                anchors.centerIn: parent
                text: "Item 5"
                color: "white"
            }
        }

        Rectangle {
            width: 100
            height: 100
            color: "orange"
            Text {
                anchors.centerIn: parent
                text: "Item 6"
                color: "white"
            }
        }
    }
}

觉得有帮助的话，打赏一下呗。。

           

需要商务合作（定制程序）的欢迎私信！！