web-dev-qa-db-ja.com

RowLayoutで項目を整列する方法

RectangleのRowLayoutsを左から右に揃えたい。以下のコード例では、2つのRectanglesが追加のスペースを共有し、代わりに次々にスタックします。 Layout.alignment: Qt.AlignLeft in RowLayout levelとRectangle levelですが、これらの2つの方法のいずれも、ビューをまったく変更しませんでした。

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を示します。

実際の

Acual layout

期待される

Expected layout

qtqmlqt5qtquick2
7
s1n7ax

ドキュメントには、Layout.alignment：

このプロパティを使用すると、アイテムが占めるcell（s）内のアイテムの配置を指定できます。

次のように、最後にフィラー項目を追加するだけです。

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"
        }
    }
}
5
derM