QML中如何实现随窗口缩放的GridLayout？（周期表开发场景）

开发一款包含周期表的应用，计划用GridLayout展示，每个元素以自定义PeriodicTableElement组件（基于GroupBox）呈现。但GridLayout无法随父窗口正常缩放：初始启动时部分元素被截断，放大或缩小窗口后元素仍会截断，看起来是固定尺寸。已尝试设置anchors.fill: window，但无效果。

代码示例 #

Item {
    id: root
    Button {
        id: button
        checkable: true
        text: qsTr("Show")

        onClicked: window.show()
    }
    Window {
        id: window
        Material.accent: parent.Material.accent
        Material.background: parent.Material.background
        Material.foreground: parent.Material.foreground
        Material.primary: parent.Material.primary
        Material.theme: parent.Material.theme
        color: Material.background
        height: parent.height
        title: qsTr("Periodic table")
        width: parent.width

        GridLayout {
            id: grid
            columns: 18

            PeriodicTableElement {
                Layout.fillHeight: true
                Layout.fillWidth: true
                atomicWeight: qsTr("1.00794")
                electronConfiguration: qsTr("1s")
                elementName: qsTr("Hydrogen")
                elementSign: qsTr("H")
                ionizationEnergy: qsTr("13 5984")
                ordinalNumber: qsTr("1")
                unknownNumber: qsTr("S1/2")
            }
            Repeater {
                model: 16

                GroupBox {
                    background: Item {
                    }
                }
            }
            Repeater {
                model: 3

                PeriodicTableElement {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    atomicWeight: qsTr("1.00794")
                    electronConfiguration: qsTr("1s")
                    elementName: qsTr("Hydrogen")
                    elementSign: qsTr("H")
                    ionizationEnergy: qsTr("13 5984")
                    ordinalNumber: qsTr("1")
                    unknownNumber: qsTr("S1/2")
                }
            }
            Repeater {
                model: 10

                GroupBox {
                    background: Item {
                    }
                }
            }
            Repeater {
                model: 6

                PeriodicTableElement {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    atomicWeight: qsTr("1.00794")
                    electronConfiguration: qsTr("1s")
                    elementName: qsTr("Hydrogen")
                    elementSign: qsTr("H")
                    ionizationEnergy: qsTr("13 5984")
                    ordinalNumber: qsTr("1")
                    unknownNumber: qsTr("S1/2")
                }
            }
            Repeater {
                model: 100

                PeriodicTableElement {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    atomicWeight: qsTr("1.00794")
                    electronConfiguration: qsTr("1s")
                    elementName: qsTr("Hydrogen")
                    elementSign: qsTr("H")
                    ionizationEnergy: qsTr("13 5984")
                    ordinalNumber: qsTr("1")
                    unknownNumber: qsTr("S1/2")
                }
            }
        }
    }
}

1. 让GridLayout占满整个窗口 #

给GridLayout添加锚定属性，确保它完全填充父窗口（Window），这样布局会跟随窗口尺寸变化：

GridLayout {
    id: grid
    anchors.fill: parent  // 核心设置，让布局填满窗口
    columns: 18
    // ... 其余元素代码不变
}

2. 统一空白GroupBox的布局属性 #

空白的GroupBox没有设置Layout.fillWidth和Layout.fillHeight，会导致布局无法均匀分配空间。给所有空白GroupBox添加这两个属性：

Repeater {
    model: 16
    GroupBox {
        Layout.fillWidth: true
        Layout.fillHeight: true
        background: Item {}
    }
}
// 其余空白GroupBox的Repeater同理添加上述属性

3. 优化Window的尺寸设置 #

移除Window对root尺寸的绑定，设置合理的最小尺寸，让窗口可以自由调整大小，布局自动适配：

Window {
    id: window
    // ... 保留Material相关属性
    color: Material.background
    minimumWidth: 800  // 设置最小宽度，避免窗口过小导致元素挤压
    minimumHeight: 600 // 设置最小高度
    title: qsTr("Periodic table")
    // 移除 width: parent.width 和 height: parent.height
}

4. 检查自定义组件内部布局 #

确保PeriodicTableElement组件内部没有固定宽高的设置，所有子元素使用相对布局（比如锚定、Layout属性），这样组件才能跟随GridLayout的缩放而自适应变化。

内容的提问来源于stack exchange，提问作者PatrickRKa