Проблемы с макетом формы QML (GridLayout)

Сейчас я пытаюсь преобразовать пользовательский интерфейс моего приложения с 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();
                }
            }
        }
    }
}

Я использовал GridLayout как более совместимый с макетом формы. Но окно выглядит не так, как ожидалось. Это скриншот:

Снимок экрана

GridLayout имеет поле 10 пикселей, а также 10 пикселей между строками / столбцами.

Но на скриншоте видно, что строка с кнопкой не имеет полей и интервала.

Что я делаю не так?

Qt 5.3.0 Debian 7.5 x32


qt qml qtquick2 qtquickcontrols
person folibis    schedule 08.06.2014    source источник
comment
может потребоваться настроить anchors.topMargin и anchors.bottomMargin   -  person Kunal    schedule 09.06.2014
comment
Да, у меня получилось - anchors.margins: 10   -  person folibis    schedule 09.06.2014

Ответы (1)


arrow_upward
11
arrow_downward

Проблема в том, что для элемента, содержащего вашу кнопку, не задана высота. Проблемы этого типа следует проверять в первую очередь при отладке проблем с разметкой. Вы можете сделать это, распечатав геометрию объекта:

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

form

person Mitch    schedule 09.06.2014
comment
Спасибо, @Mitch! Это именно то, что мне нужно. - person folibis; 09.06.2014