Qt Quick:矩形不显示

Question

我正在创建一个基本的登录表单，但是没有显示矩形。请容忍我！

main.qml:

import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 400
height: 600
LoginForm {
anchors.centerIn: parent
//height: 300
//width: 300
}
}

登录表单.ui.qml:

import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
Item {
Rectangle {
color: "#E8E8E8"
radius: 5
anchors.centerIn: parent
anchors.fill: parent
width: childrenRect.width
height: childrenRect.height
GridLayout {
id: "grid_layout"
flow: GridLayout.TopToBottom
anchors.centerIn: parent
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 12
anchors.bottomMargin: 12
anchors.leftMargin: 12
anchors.rightMargin: 12
Text {
id: "log_in_label"
text: "Log In"
font.pointSize: 15;
}
Text {
id: "username_label"
text: "Username:"
font.pointSize: 8
}
TextField {
id: "username_input"
Layout.columnSpan: 2
font.pointSize: 8
}
Text {
id: "password_label"
text: "Password:"
font.pointSize: 8
}
TextField {
id: "password_input"
Layout.columnSpan: 2
font.pointSize: 8
}
Button {
text: "Sign in"
}
}
}
}

我对Qt Quick完全陌生，我不明白为什么这不起作用，但当我取消注释"height:300"one_answers"width:300"时，它神奇地起作用了。为什么会这样，我应该如何克服这一点，因为我不想手动定位它们，我更喜欢使用比例和布局。

Answer 1

您什么都看不到的原因是：

在您的LoginForm.ui.qml中，您有一个由Rectangle填充的Item

Item { // This Item has no size unless you specify it, when instantiating it (uncomment width and height)
Rectangle {
color: "#E8E8E8"
radius: 5
anchors.centerIn: parent 
anchors.fill: parent // This will fill the Item. As long as you don't specify a size, it will be invisibile.
width: childrenRect.width // This conflicts with the anchors. It will be ignored.
height: childrenRect.height // This conflicts with the anchors. It will be ignored.
[...]
}
}

当您没有从外部指定大小时，您可以将Item的implicitWidth/Height设置为它应该具有的大小。

Item {
implicitHeight: // calculate the size it should have when the size is not changed
implicitWidth: // here as well.
Rectangle {
color: "#E8E8E8"
radius: 5
anchors.centerIn: parent
anchors.fill: parent
}
GridLayout {
anchors {
fill: parent
leftMargin: 12
[...]
}
[...]
Button {
text: "Sign in"
}
}
}

Answer 2

只需删除LoginForm.ui.qml 中的外部项｛｝