How to align items in RowLayout

Question

I want to align Rectangles in a RowLayout left to right. In below code example two Rectangles share additional space instead stack one after another. I used Layout.alignment: Qt.AlignLeft in RowLayout level and Rectangle level, but non of those two ways didn't change the view at all.

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

In following images black border indicates the RowLayout and red border is the Rectangles.

Actual

Expected

You might be happier using a `Row` instead of the `RowLayout` - for that is the normal behavior of the `Row`. — derM - not here for BOT dreams, Nov 08 '17 at 18:57
It doesn't make much sense to me to use a horizontal RowLayout when the children Items have static widths. Use a Row instead and bind the children's heights to the Row's height. — Tony Clifton, Nov 08 '17 at 19:09

derM - not here for BOT dreams · Accepted Answer · 2017-11-08T19:11:18.663

The documentation states regarding the Layout.alignment:

This property allows you to specify the alignment of an item within the cell(s) it occupies.

You can simply add a filler item at the end like such:

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
    }
}

But alternatively use that:

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

score 0 · Answer 2 · answered Nov 09 '17 at 10:42

You could change the spacing value to a negative like below :

RowLayout {
    anchors.fill: parent
    spacing: -parent.width*0.6
    Rectangle {
        width: 100
        Layout.fillHeight: true
        Layout.alignment: Qt.AlignLeft
        border.width:1
        border.color:"red"
        Text {
            text: "Hello world"
        }
    }
    Rectangle {
        width: 100
        Layout.fillHeight: true
        Layout.alignment: Qt.AlignLeft
        border.width:1
        border.color:"red"
        Text {
            text: "Hello world"
        }
    }

}

How to align items in RowLayout

Actual

Expected

2 Answers2