QML表格佈局（GridLayout）麻煩

Question

我現在正在嘗試將我的應用程序用戶界面從C++轉換爲QML。在一些步驟，我需要一個登錄窗口，所以我用下面的代碼創建它在QML：

Window { 
    id: loginWindow 
    property string username: login.text; 
    property string password: password.text; 
    property bool issave: savePassword.checked; 

    flags: Qt.Dialog 
    modality: Qt.WindowModal 
    width: 400 
    height: 160 
    minimumHeight: 160 
    minimumWidth: 400 
    title: "Login to program" 

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

     Label { 
      text: "Login" 
     } 
     TextField { 
      id: login 
      text: Config.getParam("user") 
      Layout.fillWidth: true 
     } 

     Label { 
      text: "Password" 
     } 
     TextField { 
      id: password 
      text: Config.getParam("password") 
      echoMode: TextInput.Password 
      Layout.fillWidth: true 
     } 

     Label { 
      text: "Save password?" 
     } 
     CheckBox { 
      id: savePassword 
     } 

     Item { 
      Layout.columnSpan: 2 
      Layout.fillWidth: true 
      Button { 
       anchors.centerIn: parent 
       text: "Enter" 
       onClicked: { 
        loginWindow.close(); 
       } 
      } 
     } 
    } 
} 

我用網格佈局更兼容，形成佈局。但窗戶看起來不像預期的那樣。這是截圖：

網格佈局有10px的保證金，也10px的行/列之間。

但在截圖中可以看到，帶按鈕的行既沒有邊距也沒有間距。

我做錯了什麼？

的Qt 5.3.0 的Debian 7.5 X32

Answer 1

的問題是，包含您的按鈕的項目不具備的高度設置。這種類型的問題是在調試佈局問題時首先要檢查的問題。

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

    Component.onCompleted: print(x, y, width, height) 

    Button { 
     anchors.centerIn: parent 
     text: "Enter" 
     onClicked: { 
      loginWindow.close(); 
     } 
    } 
} 

此輸出：：

QML：0 87 118 0

的修復：

Item { 
    Layout.columnSpan: 2 
    Layout.fillWidth: true 
    implicitHeight: button.height 

    Button { 
     id: button 
     anchors.centerIn: parent 
     text: "Enter" 
     onClicked: { 
      loginWindow.close(); 
     } 
    } 
} 

可以通過打印項的幾何形狀做

完整代碼：

import QtQuick 2.2 
import QtQuick.Window 2.0 
import QtQuick.Controls 1.1 
import QtQuick.Layouts 1.1 

Window { 
    id: loginWindow 
    property string username: login.text; 
    property string password: password.text; 
    property bool issave: savePassword.checked; 

    flags: Qt.Dialog 
    modality: Qt.WindowModal 
    width: 400 
    height: 160 
    minimumHeight: 160 
    minimumWidth: 400 
    title: "Login to program" 

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

     Label { 
      text: "Login" 
     } 
     TextField { 
      id: login 
      text: "blah" 
      Layout.fillWidth: true 
     } 

     Label { 
      text: "Password" 
     } 
     TextField { 
      id: password 
      text: "blah" 
      echoMode: TextInput.Password 
      Layout.fillWidth: true 
     } 

     Label { 
      text: "Save password?" 
     } 
     CheckBox { 
      id: savePassword 
     } 

     Item { 
      Layout.columnSpan: 2 
      Layout.fillWidth: true 
      implicitHeight: button.height 

      Button { 
       id: button 
       anchors.centerIn: parent 
       text: "Enter" 
       onClicked: { 
        loginWindow.close(); 
       } 
      } 
     } 
    } 
}