What is the proper way to create layout in qml

[Ahti]

Hi
I am trying to create a layout for controls but I am not getting how to do it. I want to it to look similar to this:

please help

[jsulm]

@Ahti Looks like https://doc.qt.io/qt-5/qml-qtquick-layouts-gridlayout.html
Also take a look at https://doc.qt.io/qt-5/qtquicklayouts-index.html

[Shrinidhi Upadhyaya]

Hi @Ahti , if the components are similar and repeating i guess you can use Repeater.

Here is a sample code:-

RowLayout {
    anchors.fill: parent
    spacing: 20

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

        Repeater {
            model: 4

            TextField {
                Layout.preferredWidth: 200
                Layout.preferredHeight: 40
                placeholderText: qsTr("Text ") + index
                Layout.alignment: Qt.AlignRight
            }
        }
    }

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

        Repeater {
            model: 4
            
            Button {
                Layout.preferredWidth: 200
                Layout.preferredHeight: 40
                text: "Control " + index
            }
        }
    }
}

Sample Output:-

For more information:-

Repeater[https://doc.qt.io/qt-5/qml-qtquick-repeater.html]
Layouts[https://doc.qt.io/qt-5/qtquicklayouts-index.html]

[Ahti]

@Shrinidhi-Upadhyaya well now I want some text to have multiple controls in one group and others with one. Can I do that with your solution ?