Wie erstellen Sie ein Eingabeformular wie im angehängten Bild gezeigt mit QML?

Question

Ich versuche, ein Eingabeformular zu erstellen, das dem angehängten Bild ähnelt. Ist dies der "Standard" Weg, dies mit QML zu tun? Ich habe versucht, Layouts zu verwenden, aber es kann nicht so aussehen.

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 

Was ich nach:

Answer 1

Einfachen Template-Code, wie es mit Layouts getan werden kann:

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