Qt GridLayout：宽度和高度问题

关于

QtQuickLayouts 1.3

中的

GridLayout

，我有几个问题：

我应该如何设置，以便GridLayout将网格中的每个元素放置到正确的行/列中，即使元素的大小没有通过

with

或

height

参数明确指定

让我移除

宽度

和

高度

，然后我将向您展示损坏的布局。我只想评论一下：

        Item {
            id: test_item  
            //Layout.fillWidth: true
            //height: 20
        }

.qml

文件的完整源代码位于此处，可以使用

bin/qmlscene

进行测试：

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） 第二个问题。如何使用

component

类型通过

Loader

将组件加载到

GridLayout

单元格中？例如，这是我的完整源代码，包含

组件

项，渲染时缺少该组件：

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

呈现的输出图片如下：

---

我已经正确指定了位置和高度，为什么组件没有加载

加载器
？
，因为第二个问题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"
              }
          }
      }

看第二个问题：您的组件已经创建，您可以使用
component.onCompleted
检查它。问题是您没有设置的大小。我指的是
加载程序的大小。当前大小为（0,0），因此您无法看到该项目。尝试设置
Layout.fillWidth:true；Layout.preferredHeight:33
用于
加载程序
而不是
组件
项
。对于第一个问题，我认为这是不可能的，
qml
不会呈现零大小的元素，因此
GridLayout
不会考虑元素。