QMLを使用して、添付された図のように入力フォームを作成するにはどうすればよいですか？

Question

添付写真と似た入力フォームを作成しようとしています。これはQMLでこれを行う「標準的な」方法ですか？私はレイアウトを使ってみましたが、このように見えるようにすることはできません。

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

シンプルなテンプレートコード：簡単Layout` `で行うことができます

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