QML表单布局

问题描述 投票:5回答:1

我将QML用于我的应用程序中的UI,现在我想构建某种形式。这是一个代码:

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

如何设置TextField的宽度?它们中的大多数必须适合右列中的所有空间。

现在的样子:

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9XcWJUaS5wbmcifQ==” alt =“在此处输入图像描述”>

qt qml qtquick2 qt-quick qtquickcontrols
1个回答
5
投票

您可以使用GridLayout(请参阅official documentation)中放置的项目的附加属性,因此代码中的更改将如下所示:

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

Label { text: "field2"}
TextField { id: field2; Layout.fillWidth: true;}
...
© www.soinside.com 2019 - 2024. All rights reserved.