我现在正在尝试将我的应用UI从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具有10px的余量,行/列之间也有10px.
但是在屏幕截图中可以看到带按钮的行既没有边距也没有间距.
我做错了什么?
Qt 5.3.0 Debian 7.5 x32
问题是包含Button的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
修复:
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(); } } } } }