网格布局：宽度和高度问题

我在QtQuickLayouts 1.3约GridLayout几个问题：网格布局：宽度和高度问题

我应该怎么做呢，所以GridLayout的地方到正确行/列我网的每一个元素，即使元素的大小没有被with或height参数明确指定？

让我删除width和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 " 
      } 
     } 
    } 
}

的“broken`输出看起来是这样的：

虽然正确的输出与Item的大小指定如下所示：

2）第二个问题。如何通过Loader使用Component类型将组件加载到GridLayout单元中？例如，这是我的完整源与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渲染输出的画面是这样的：

我有正确特殊的身高和身高，为什么不是与Loader加载组件？

来源

2017-01-08 Nulik

看[Layout.columnSpan（http://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html#columnSpan-attached-prop） – folibis

第二个问题：你的组件被创建，你可以用'Component.onCompleted'来检查它。问题在于你没有设置的大小。我的意思是'Loader'的大小。当然，大小是（0,0），所以你只是看不到该项目。尝试设置'Layout.fillWidth：true; Layout.preferredHeight：33'代表'Loader'而不是'Component'的'Item'。 – folibis

因为，我认为第一个问题甚至不可能，'qml'不会渲染一个大小为零的元素，所以'GridLayout'不会考虑元素。 –

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

... 
    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" 
       } 
      } 
     }

来源

2017-01-09 09:54:48

网格布局：宽度和高度问题

回答

相关问题