CODEWITHSUNDEEP
qtqmlqt5qtquick2
s1n7ax
s1n7ax

Reputation: 3069

How to align items in RowLayout

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

Acual layout

Expected

Expected layout

Upvotes: 15

Views: 31738

Answers (3)

Victor Corchez
Victor Corchez

Reputation: 141

From the documentation of Layouts you shouldn't use width property for Items inside a Layout. Instead you should use Layout.preferredWidth/Height and min/max if needed

Upvotes: 0

Kristel Alphonso
Kristel Alphonso

Reputation: 29

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

}

Upvotes: -1

derM
derM

Reputation: 13691

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

Upvotes: 18

Related Questions