GridLayout：宽度和高度问题

Question

我在GridLayout中有一些关于QtQuickLayouts 1.3的问题：

1. 我应该如何制作它，因此GridLayout将我的网格的每个元素放入 CORRECT 行/列中，即使with或{{未明确指定元素的大小1}}参数？

让我删除height和width，然后我会告诉你破坏的布局。我会评论出来：

height

Item { id: test_item //Layout.fillWidth: true //height: 20 } 文件的完整源代码在此处，可以使用.qml进行测试：

bin/qmlscene

'broken`输出如下所示：



虽然指定import QtQuick 2.7 import QtQuick.Controls 2.1 import QtQuick.Layouts 1.3 ApplicationWindow { width: 400 height: 500; ColumnLayout { anchors.fill: parent GridLayout { anchors.fill: parent columns: 2 Label { text:"Email:" } Rectangle { width: 80; height: 20 border.color: "magenta" } Label { text: "Full Name:" Layout.fillWidth: true } Item { id: test_item // the commented out portion, to show the flaw //Layout.fillWidth: true //height: 20 } Label { text: "Gender:" } RowLayout { Layout.minimumHeight: 20 Layout.fillWidth: true RadioButton { text: "Male" width: parent.width/2 height: 20 } RadioButton { text: "Female" width: parent.width/2 height: 20 } } Label { text: "Mobile phone:" } Rectangle { width: 80; height: 20 border.color: "magenta" } } Row { Button { text: "Cancel" } Button { text: " Ok " } } } } 大小的正确输出如下所示：



2）第二个问题。如何使用Item类型通过GridLayout将组件加载到Loader单元格中？例如，这是我的完整源代码Component项，渲染时组件丢失：

Component

import QtQuick 2.7 import QtQuick.Controls 2.1 import QtQuick.Layouts 1.3 ApplicationWindow { width: 400 height: 500; ColumnLayout { anchors.fill: parent GridLayout { anchors.fill: parent columns: 2 Label { text:"Email:" } Rectangle { width: 80; height: 20 border.color: "magenta" } Label { text: "Full Name:" Layout.fillWidth: true } Loader { id: test_item sourceComponent: field_template } Label { text: "Gender:" } RowLayout { Layout.minimumHeight: 20 Layout.fillWidth: true RadioButton { text: "Male" width: parent.width/2 height: 20 } RadioButton { text: "Female" width: parent.width/2 height: 20 } } Label { text: "Mobile phone:" } Rectangle { width: 80; height: 20 border.color: "magenta" } } Row { Button { text: "Cancel" } Button { text: " Ok " } } } Component { id: field_template Item { Layout.fillWidth: true height: 33 Rectangle { border.color: "blue" color: "transparent" anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top anchors.bottom: parent.bottom anchors.rightMargin: 10 TextEdit { anchors.fill: parent anchors.leftMargin: 5 anchors.topMargin: 3 anchors.rightMargin: 2 clip: true text: "type here" } } } } } 呈现的输出图片如下：



我已经正确地说明了高度和高度，为什么组件没有加载qmlscene？

Answer 1

对于第二个问题，folibis在评论中是正确的。你只需要检查大小。这是一个有效的代码。

    ...
    Item {
    Layout.fillWidth: true
    //width: 80
    height:20
        Loader {
            id: test_item
        anchors.fill: parent
            sourceComponent: field_template
        }
    } 
    ...
Component {
      id: field_template
      Item {
          Rectangle {
              border.color: "blue"
              color: "transparent"
              anchors.left: parent.left
              anchors.right: parent.right
              anchors.top: parent.top
              anchors.bottom: parent.bottom
              anchors.rightMargin: 10

              TextEdit {
                  anchors.fill: parent
                  anchors.leftMargin: 5
                  anchors.topMargin: 3
                  anchors.rightMargin: 2
                  clip: true
                  text: "type here"
              }
          }
      }