how to create multiple rows of different size with rowlayout

[Ahti]

I want to have multiple rows each one having different number of controls. I am using RowLayout for that ? here is my code so far:

My Code:

 RowLayout {
        anchors.fill: parent
        spacing: 5

        ColumnLayout {
            Layout.preferredHeight: parent.height
            Layout.preferredWidth: parent.width

            Text {
                Layout.preferredWidth: 200
                Layout.preferredHeight: 20
                text: qsTr("label: ")
                Layout.alignment: Qt.AlignRight
            }
        }

        ColumnLayout {
            Layout.preferredHeight: parent.height
            Layout.preferredWidth: parent.width

            Slider {
                id: slider_0
                Layout.preferredWidth: 300
                Layout.preferredHeight: 40

                minimumValue: 0
                maximumValue: 100
                value: 0
                stepSize: 1.0                

                Text {
                    text: "0"
                    anchors.centerIn: slider_0
                    font.pixelSize: 25
                }
            }
        }
    }

This is what I want:

Please help.

[fcarney]

I think from here you can probably figure out control6.

    ColumnLayout {
        id: all
        anchors.fill: parent
        RowLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignHCenter
            Label {
                id: label1
                Layout.preferredWidth: 300
                color: "red"
                text: "label1"
            }
            ColumnLayout {
                id: controls1

                Rectangle {
                    Layout.preferredWidth: 300
                    Layout.preferredHeight: 40
                    color: "blue"
                }
            }
        }
        RowLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignHCenter
            Label {
                id: label2
                Layout.preferredWidth: 300
                color: "red"
                text: "label2"
            }
            ColumnLayout {
                id: controls2
                Rectangle {
                    Layout.preferredWidth: 300
                    Layout.preferredHeight: 40
                    color: "blue"
                }
                Rectangle {
                    Layout.preferredWidth: 300
                    Layout.preferredHeight: 40
                    color: "blue"
                }
            }
        }
        RowLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignHCenter
            Label {
                id: label3
                Layout.preferredWidth: 300
                color: "red"
                text: "label3"
            }
            ColumnLayout {
                id: controls3
                Rectangle {
                    Layout.preferredWidth: 300
                    Layout.preferredHeight: 40
                    color: "blue"
                }
                Rectangle {
                    Layout.preferredWidth: 300
                    Layout.preferredHeight: 40
                    color: "blue"
                }
            }
        }
    }

[Pradeep P N]

Hi @Ahti

Prefer using Layout's inside the Layout with proper spacing & Layout.properties

All the best.

[Ahti]

@fcarney @Pradeep-P-N What about GridLayout would it be better to use it instead of rowlayout ? if yes how would you go about doing so ?

[Pradeep P N]

@Ahti
As per your GUI image i thinks the Row & Column Layouts should be fine.