動態創建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. 利潤！

感謝您的關注:)