QML form layout

Question

I use QML for UI in my app and now I want to build some form. This is a code:

Window {
    width: 400
    height: 600
    flags: Qt.Dialog
    modality: Qt.ApplicationModal

    GridLayout {
        id: mainLayout
        columns: 2
        rowSpacing: 5
        columnSpacing: 5
        anchors {
            top: parent.top;
            left: parent.left
            right: parent.right
        }

        Label { text: "field1" }
        TextField { id: field1; }

        Label { text: "field2"}
        TextField { id: field2 }
    }
}

How can I set width for the TextFields? Most of them have to fit all the space in the right column.

That how it looks now:

Answer 1

You can use attached properties of items placed inside GridLayout (see official documentation), so changes in your code will look like:

...
Label { text: "field1" }
TextField { id: field1; Layout.fillWidth: true;}

Label { text: "field2"}
TextField { id: field2; Layout.fillWidth: true;}
...