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