动态创建QML ObjectModel元素

Question

我'试图动态创建一堆QML ObjectModel元素，如简单的矩形，然后让他们在的ListView。但是当我构建我的应用程序时，没有任何内容出现控制台日志仅显示消息：“创建的图形对象没有放置在图形场景”。有没有办法用这种方法或其他方法来做到这一点？

UPD：代码

main.qml

import "imgRectsCreation.js" as ImgRectsCreationScript 
import QtQuick 2.0 
import QtQml.Models 2.1 

Rectangle { 
    id: root 

    ObjectModel{ 
     id: itemModel 
     Component.onCompleted: ImgRectsCreationScript.createImgRects(); 
    } 

    ListView { 
     id: view 
     clip: true 
     anchors { fill: root; bottomMargin: 30 } 
     model: itemModel 
     preferredHighlightBegin: 0; preferredHighlightEnd: 0 
     highlightRangeMode: ListView.StrictlyEnforceRange 
     orientation: ListView.Horizontal 
     snapMode: ListView.SnapOneItem; flickDeceleration: 2000 
     cacheBuffer: 200 
    } 

    Rectangle { 
     width: root.width; height: 30 
     x: 10 
     y: 330 
     color: "gray" 

     Row { 
      anchors.centerIn: parent 
      spacing: 20 

      Repeater { // little points at the bottom 
      model: itemModel.count 

       Rectangle { 
        width: 5; height: 5 
        radius: 3 
        color: view.currentIndex == index ? "sandybrown" : "white" 

        MouseArea { 
         width: 20; height: 20 
         anchors.centerIn: parent 
         onClicked: view.currentIndex = index 
        } 
       } 
      } 
     } 
    } 
} 

imgRectsCreation.js

var sprite; 
var component; 

function createImgRects() { 
    component = Qt.createComponent("ImgRectSprite.qml"); 
    if (component.status === Component.Ready) 
     finishCreation(); 
    else 
     component.statusChanged.connect(finishCreation); 
} 

function finishCreation() { 
    for (var i = 0; i < 3; i++) { 
     if (component.status === Component.Ready) { 
      sprite = component.createObject(itemModel, {"x": 10, "y": 10}); 
      if (sprite === null) { // Error Handling 
       console.log("Error creating object"); 
      } 
     } 
     else if (component.status === Component.Error) { // Error Handling 
      console.log("Error loading component:", component.errorString()); 
     } 
    } 
} 

最后 - ImgRectSprite.qml

import QtQuick 2.0 

Rectangle { 
    width: 100; height: 100; 
    color: "red" 
    Image { 
     width: parent.width 
     height: parent.height 
     source: window.slotGetFileUrl() 
    } 
} 

Answer 1

我不是JS代码组件创建的忠实粉丝 - 我倾向于把QML代码.qml文件和“重”（以及它的JS毕竟）里面的代码.js文件 - 。

您是否尝试过使用Loader对象动态创建qml对象？

Answer 2

好吧，好吧，我已经自己解决了。但我不完全相信这是一个正确的决定。

1. 我决定从我main.qml

2. 删除ObjectModel ...与取代它的​​ListModel

   ListModel { 
       id: dataModel 
   
       dynamicRoles: true 
       Component.onCompleted: { 
        for (var i = 0; i < 3; i++) 
        { 
         append({ color: "orange" }) 
        } 
       } 
   } 
   

3. 最后，我已经添加了代表对我的ListView

   delegate: Rectangle { 
       width: view.width 
       height: view.height 
       color: model.color 
   
       Image { 
        width: parent.width 
        height: parent.height 
        source: window.slotGetFileUrl() // includes logic to select images 
       } 
   

4. ???

5. 利润！

感谢您的关注:)