如何在RowLayout中对齐项目

Question

我想从左到右对齐Rectangles RowLayout.在下面的代码示例中,两个Rectangles共享额外空间而不是一个接一个地堆叠 我Layout.alignment: Qt.AlignLeft在RowLayout关卡和Rectangle关卡中使用过,但是这两种方式都没有改变视图.

Item {
    RowLayout {
        anchors.fill: parent
        spacing: 2


        Rectangle {
            width: 100
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignLeft

            Text {
                text: "Hello world"
            }
        }

        Rectangle {
            width: 100
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignLeft

            Text {
                text: "Hello world"
            }
        }
    }
}

在下面的图像中,黑色边框表示RowLayout红色边框是Rectangles.

实际

预期

Answer 1

文档说明了Layout.alignment:

此属性允许您指定项目占据的单元格中的对齐方式.

您可以在最后添加填充项,如下所示:

RowLayout {
    anchors.fill: parent
    spacing: 2


    Rectangle {
        width: 100
        Layout.fillHeight: true
        Layout.alignment: Qt.AlignLeft
        color: 'red'

        Text {
            text: "Hello world"
        }
    }

    Rectangle {
        width: 100
        Layout.fillHeight: true
        Layout.alignment: Qt.AlignLeft
        color: 'green'

        Text {
            text: "Hello world"
        }
    }

    Item {
        Layout.fillWidth: true
    }
}

但另外使用:

Row {
    anchors.fill: parent
    spacing: 2


    Rectangle {
        width: 100
        anchors {
            top: parent.top
            bottom: parent.bottom
        }

        color: 'red'

        Text {
            text: "Hello world"
        }
    }

    Rectangle {
        width: 100
        anchors {
            top: parent.top
            bottom: parent.bottom
        }
        color: 'green'

        Text {
            text: "Hello world"
        }
    }
}