GridLayout: ширина и высота вопросы

Question

У меня есть несколько вопросов о GridLayout в QtQuickLayouts 1.3:

1. Как я должен сделать это, так местах GridLayout Into ПРАВИЛЬНОЙ строки/столбца каждый элемент моей сетки, даже если размер элемента четко не указан параметром 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) Второй вопрос. Как загрузить компонент в ячейку 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 это:

я правильно speecified witdht и height, почему компонент не загружается Loader?

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