QML中RowLayout无法在父容器中垂直水平居中问题

你遇到的问题本质是RowLayout在仅靠anchors.centerIn: parent定位时，没有明确的宽度约束，Layout会自动收缩到最小尺寸，导致内部元素的间距被挤压。不用额外添加元素的话，可以通过以下几种方式解决：

1. 让RowLayout填充父容器宽度，配合spacing设置 #

给RowLayout加上Layout.fillWidth: true，让它撑满父元素的宽度，再通过spacing属性指定元素间的固定间距。这样内部元素会在可用空间里保持设定的间距，同时整体居中：

Rectangle {
    width: 400
    height: 200
    color: "#f0f0f0"

    RowLayout {
        anchors.centerIn: parent
        Layout.fillWidth: true
        spacing: 20  // 自定义元素间距

        Rectangle {
            width: 50
            height: 50
            color: "red"
        }
        Rectangle {
            width: 50
            height: 50
            color: "blue"
        }
        Rectangle {
            width: 50
            height: 50
            color: "green"
        }
    }
}

2. 给RowLayout设置最小宽度，保证间距空间 #

如果不想让RowLayout填充整个父容器宽度，可以计算内部元素总宽度加上所需间距，设置为RowLayout的minimumWidth，同时保留anchors.centerIn: parent和spacing：

Rectangle {
    width: 400
    height: 200
    color: "#f0f0f0"

    RowLayout {
        anchors.centerIn: parent
        minimumWidth: 50*3 + 20*2  // 3个矩形宽度 + 2个间距
        spacing: 20

        Rectangle {
            width: 50
            height: 50
            color: "red"
        }
        Rectangle {
            width: 50
            height: 50
            color: "blue"
        }
        Rectangle {
            width: 50
            height: 50
            color: "green"
        }
    }
}

补充说明 #

之前锚点仅垂直生效，是因为你没给RowLayout设置水平方向的约束；而用anchors.centerIn: parent后间距被压缩，是因为RowLayout没有足够的宽度空间来分配你期望的间距——QML的Layout组件会优先根据子元素的最小需求来调整自身尺寸，没有外部约束时就会挤压间距。

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