Создание элемента QML через функцию, определенную в js-библиотеке, не устанавливает прикрепленные свойства

Question

Примечание: Функция в QtQuickUtils.js в следующем тестовом сценарии предназначена только для абстрагирования шаблона, связанного с созданием объекта QML с URL-адреса компонента.

TestCase:

main.qml:

import QtQuick 2.6 
import QtQuick.Window 2.2 
import QtQuick.Layouts 1.3 
import "QtQuickUtils.js" as QtQuickUtils 

Window { 
    visible: true 
    width: 640 
    height: 480 

    GridLayout { 
     anchors.fill: parent 
     id: container 
     columns: 1 
    } 

    Component.onCompleted: { 
     QtQuickUtils.createObjectFromComponent("qrc:///MyItem.qml", container, { 
      "Layout.fillWidth": true, "Layout.fillHeight": true 
      // "width": 100, "height": 100 
     }); 
    } 
} 

MyItem.qml:

import QtQuick 2.0 

Rectangle { 
    color: "red" 
} 

QtQuickUtils.js:

.import QtQml 2.0 as Qml 
.pragma library 

function createObjectFromComponent(componentUrl, parent, properties) { 
    var component = Qt.createComponent(componentUrl); 
    function finishCreation() { 
     console.log("finishCreation"); 
     if (component.status === Qml.Component.Ready) { 
      var obj = component.createObject(parent, properties); 
      if (obj === null) { 
       console.log("Error creating object"); 
       return; 
      } 
      console.log("success in creating obj"); 
     } else if (component.status === Qml.Component.Error) { 
      console.log("Error loading component:", component.errorString()); 
      return; 
     } 
    } 
    if (component.status === Qml.Component.Ready) { 
     finishCreation(); 
    } else { 
     component.statusChanged.connect(function() { finishCreation(); }); 
    } 
} 

Это ничего не показывает (но печатаются «finishCreation» и «success in create obj»).

Если я прокомментирую строку "Layout.fillWidth": true, "Layout.fillHeight": true и раскомментирую одно после этого, элемент отображается.

Также, если я переведу функцию из файла JS в main.qml, элемент отображается.

Я попытался переместить функцию из файла JS в новый qml-файл (попробовал оба сделать этот файл QML singleton и не), но это не исправить.

Любая идея, что я делаю неправильно, и правильное исправление?

Answer 1

JS-файл не знает, что такое Layout, поэтому он не может его установить.

// in a JS file, shared or not 
function foo(item) { console.log(item.Layout) } // undefined 

Если бы вы были:

.import QtQuick.Layouts 1.3 as L // you can't import without "as" in .JS 
function foo(item) { console.log(item.L.Layout) } // and it suddenly works 

Так добавив небольшое неудобство, вы можете достичь цели, просто используя:

"L.Layout.fillWidth": true, "L.Layout.fillHeight": true 

Однако, он будет работать с одноплодной без что дополнительный шаг, потому что там вы можете сделать «анонимный» import QtQuick.Layouts 1.3, и внезапно жизнь снова станет легкой. Как я уже упоминал в комментариях, я действительно не вижу причины использовать pragma library, если, возможно, вы не используете некоторую стороннюю JS-библиотеку. Для всего остального QML-синглтоны гораздо более полезны, вы получаете «общую» часть, плюс поддержку объектов QML, свойств с уведомлениями, сигналами, привязками и всем этим хорошим материалом.