Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

how to create multiple rows of different size with rowlayout



  • 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:

    0_1560451763291_qml layout.PNG

    Please help.



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


  • Hi @Ahti

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

    All the best.



  • @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 ?



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


Log in to reply