QML 表单布局(GridLayout)的烦恼 [英] QML Form layout (GridLayout) troubles

问题描述

我现在正在尝试将我的应用程序 UI 从 C++ 转换为 QML.在某些步骤中，我需要一个登录窗口，所以我在 QML 中使用以下代码创建了它:

I am trying now to convert my app UI from C++ to QML. At some step I need a login window so I created it in QML with code below:

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();
                }
            }
        }
    }
}

我使用 GridLayout 作为更兼容的表单布局.但是窗口看起来并不像预期的那样.这是截图:

I used GridLayout as more compatible to form layout. But the window looks not as expected. This is a screenshot:

GridLayout 的边距为 10px，行/列之间也为 10px.

GridLayout has 10px margin and also 10px between rows/columns.

但是在屏幕截图中可以看到，带有按钮的行既没有边距也没有间距.

But at the screenshot it is seen that the row with button has neither margins nor spacing.

我做错了什么?

Qt 5.3.0Debian 7.5 x32

Qt 5.3.0 Debian 7.5 x32

推荐答案

问题是包含您的 Button 的 Item 没有设置高度.这类问题是调试布局问题时首先要检查的问题.您可以通过打印项目的几何形状来做到这一点:

The problem is that the Item containing your Button doesn't have a height set. This type of problem is the first thing to check when debugging layout problems. You can do so by printing out the geometry of the item:

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

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();
                }
            }
        }
    }
}

这篇关于QML 表单布局(GridLayout)的烦恼的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！