如何使用 QML 创建如附图所示的输入表单？

Question

我正在尝试创建一个与所附图片相似的输入表单。这是使用 QML 执行此操作的 'standard' 方法吗？我试过使用布局，但无法让它看起来像这样。

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1


Window {
    id: window
    title: qsTr("Test")
    width: Screen.width / 8
    height: Screen.height / 4
    minimumWidth: 300
    minimumHeight: 300

    visible: true
    color: "#ff0000"

    Rectangle  {
        id: rootrect
        color: "#000000"

        width: parent.width
        height: parent.height
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 0

        Column  {
            anchors.fill: parent
            anchors.margins: 10
            spacing: 10

            Rectangle  {
                color: "#000000"
                Layout.fillWidth: true
                height: 40;
                width: parent.width

                Label {
                    text: "Username"
                    anchors.verticalCenter: parent.verticalCenter
                    color: "#ffffff"
                    anchors.left: parent.left

                }
                TextField {
                    x: .3*parent.width
                    width: .65*parent.width
                    anchors.verticalCenter: parent.verticalCenter

                }
            }

            Rectangle  {
                color: "#000000"
                Layout.fillWidth: true
                height: 40;
                width: parent.width

                Label {
                    text: "Password"
                    anchors.verticalCenter: parent.verticalCenter
                    color: "#ffffff"
                    anchors.left: parent.left
                }
                TextField {
                    x: .3*parent.width
                    anchors.verticalCenter: parent.verticalCenter
                    width: .65*parent.width
                }
            }
        }                       // Column


        Rectangle  {
            color: "#000000"
            Layout.fillWidth: true
            height: 40;
            width: parent.width-20;
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: rootrect.bottom;
            anchors.margins: 10

            Button {
                text: "Exit"
                x: .25*parent.width - width/2
                anchors.verticalCenter: parent.verticalCenter
                onClicked: {
                    window.close();
                }
            }                   // Button

            Button {
                text: "Save"
                x: .75*parent.width - width/2
                anchors.verticalCenter: parent.verticalCenter
                onClicked: {
                }
            }                   // Button
        }                           // Rectangle
    }                               // Rectangle
}  

                             // Window

我追求的是：

Answer 1

如何使用布局完成简单的模板代码：

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.0

Window {
    width: 400
    height: 600
    visible: true

    GridLayout {
        anchors.fill: parent
        anchors.margins: 10
        columns: 2

        Label { text: "Username" }
        TextField { Layout.fillWidth: true }

        Label { text: "Password" }
        TextField { Layout.fillWidth: true }

        Item { Layout.fillHeight: true; Layout.columnSpan: 2 }

        Item {
            Layout.fillWidth: true
            Layout.preferredHeight: 40
            Layout.columnSpan: 2

            RowLayout {
                anchors.centerIn: parent
                Button { text: "Cancel" }
                Button { text: "OK" }
            }
        }
    }
}

如何使用 QML 创建如附图所示的输入表单？

How do you create an input form as shown in the attached picture using QML?

forms

layout

input

qml

qtquick2