问题描述
我现在正在尝试将我的应用程序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.0Debian 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();
}
}
}
这将输出:
解决方法:
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)的麻烦的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!