Qt Quick Layouts：如何实现行内元素水平均匀分布？

要实现每行首尾元素对齐、间距均匀且窗口自适应内容的效果，你需要让所有RowLayout共享同一宽度（即最宽行的宽度），并利用Qt Quick Layouts的属性让元素自动分配空间。以下是修改后的代码：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.12

Window {
    width: rootRect.implicitWidth
    height: rootRect.implicitHeight
    visible: true
    title: qsTr("Hello World")

    readonly property var items: [
        [[120, 80, 'red'], [100, 80, 'green'], [170, 40, 'blue']],
        [[60, 120, 'yellow'], [140, 80, 'orange'], [60, 100, 'cyan']],
        [[150, 100, 'purple'], [100, 80, 'blue'], [170, 40, 'orange']],
    ]

    // 计算所有行的最大宽度（包含布局间距）
    readonly property int maxRowWidth: {
        var width = 0;
        const layoutSpacing = 6; // 与RowLayout的spacing保持一致
        for (var i = 0; i < items.length; i++) {
            var rowWidth = 0;
            for (var j = 0; j < items[i].length; j++) {
                rowWidth += items[i][j][0];
            }
            rowWidth += (items[i].length - 1) * layoutSpacing;
            if (rowWidth > width) width = rowWidth;
        }
        return width;
    }

    Rectangle {
        id: rootRect
        implicitWidth: maxRowWidth + 10 // 保留左右各5的padding
        implicitHeight: columnLayout.implicitHeight + 10 // 保留上下各5的padding

        ColumnLayout {
            id: columnLayout
            anchors.centerIn: parent
            width: maxRowWidth // 固定ColumnLayout宽度为最大行宽

            Repeater {
                model: items

                Item {
                    id: row
                    Layout.fillWidth: true // 让行容器占满ColumnLayout宽度
                    implicitHeight: rowLayout.implicitHeight
                    readonly property var rowItems: modelData

                    RowLayout {
                        id: rowLayout
                        Layout.fillWidth: true // 让RowLayout占满父容器宽度
                        spacing: 6 // 显式设置间距，与计算maxRowWidth时一致

                        Repeater {
                            model: rowItems

                            Rectangle {
                                Layout.preferredWidth: modelData[0]
                                Layout.minimumWidth: modelData[0]
                                height: modelData[1]
                                color: modelData[2]
                                Layout.fillWidth: true // 允许布局分配额外空间
                                Layout.alignment: Qt.AlignHCenter // 元素保持自身尺寸并居中
                            }
                        }
                    }
                }
            }
        }
    }
}

关键修改说明 #

• 统一基准宽度：遍历计算所有行的总宽度（包含布局间距），将其设为ColumnLayout的固定宽度，确保所有行拥有相同的水平空间
• 填充宽度属性：给行容器和RowLayout设置Layout.fillWidth: true，强制它们占满可用的水平空间
• 元素尺寸控制：给每个Rectangle设置Layout.preferredWidth和Layout.minimumWidth保留自身原始尺寸，同时通过Layout.fillWidth: true让布局自动分配额外空间，配合Layout.alignment: Qt.AlignHCenter实现元素均匀分布的效果

编辑：添加行样式元素后问题复现的情况，只需确保行样式元素也设置Layout.fillWidth: true，保持整体宽度一致即可。

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