QML Grid控件隐藏列时移除多余间距实现元素居中

Qt Quick 中Grid控件只要设置了固定列数columns: 2，不管对应列有没有可见子元素，都会把该列的预留宽度、列间距计入自身的总内容宽度。你当前代码里给Grid设置了水平居中锚点，居中的是这个带了空白预留宽度的整个Grid控件，而非实际渲染的可见内容块：当可见元素≤4个时，刚好填满第一列的4行位置，第二列完全空白但宽度和列间距依然被算在Grid总宽度里，最终视觉上就会出现元素偏左、没有真正居中的问题。

优先用动态列数方案，不需要修改现有C++控制子项可见性的逻辑，侵入性最低：

• 给Grid新增一个计算属性，实时统计当前可见子元素的总数
• 把原来硬编码的columns: 2改成动态计算：当可见子元素数量超过设置的行数（4个）时，才启用2列布局，否则自动切换为1列
• 切换为1列时Grid不会预留第二列的宽度和列间距，自身宽度刚好包裹单列内容，原有水平居中的逻辑就会正常生效

修改后的完整代码如下：

import QtQuick 2.9
import QtQuick.Controls 2.2

Item {
    id: page

    Grid {
        id: grid
        property int buttonSize: height * 0.2
        property int spacingSize: height * 0.04
        // 实时统计可见子项数量，自动响应子项visible属性变化
        property int visibleCount: {
            let cnt = 0
            for (let child of children) if (child.visible) cnt++
            return cnt
        }

        height: parent.height
        spacing: spacingSize
        anchors.horizontalCenter: parent.horizontalCenter
        topPadding: spacingSize
        flow: Grid.TopToBottom
        rows: 4
        // 动态设置列数，元素不足一整列时不预留第二列空间
        columns: visibleCount > rows ? 2 : 1

        Rectangle {
            color: "blue"
            height: grid.buttonSize
            width: grid.buttonSize
            visible: true // 原有C++绑定逻辑无需修改
        }
        
        Rectangle {
            color: "blue"
            height: grid.buttonSize
            width: grid.buttonSize
            visible: true // 原有C++绑定逻辑无需修改
        }
        
        Rectangle {
            color: "blue"
            height: grid.buttonSize
            width: grid.buttonSize
            visible: true // 原有C++绑定逻辑无需修改
        }
        
        Rectangle {
            color: "blue"
            height: grid.buttonSize
            width: grid.buttonSize
            visible: true // 原有C++绑定逻辑无需修改
        }
        
        Rectangle {
            color: "blue"
            height: grid.buttonSize
            width: grid.buttonSize
            visible: true // 原有C++绑定逻辑无需修改
        }
    }
}

补充说明：这个写法的属性绑定是响应式的，不管visible属性是从C++侧修改还是QML侧修改，都会自动触发列数和布局重算，不需要手动调用刷新方法。如果业务上必须固定保留2列的骨架宽度，也可以通过手动计算Grid的leftPadding偏移量实现居中，但动态列数的方案维护成本最低，适配不同数量的元素更灵活。

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