QML動態添加按鈕

Question

我寫了一個簡單的代碼，問題是如何將按鈕添加到第一頁而不是第二頁。我有三個calsses（main.qml，componentCreation.js，ButtonD.qml）

import QtQuick 2.7 
import QtQuick.Controls 2.0 
import QtQuick.Layouts 1.3 
import "componentCreation.js" as MyScript 

ApplicationWindow { 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("Hello World") 
    property var position: 0 

    Rectangle{ 
     id: main 
     color: "#FFFFFF" 
     width: parent.width 
     height: parent.height 
     x:200 
     y:0 
     focus: true 

     StackView{ 
      id: stack 
      initialItem: firstPage 
      Component{ 
       id: firstPage 
       Rectangle{ 
        id:firstRect 
        Label{ 
         text: "firstPage" 
         x:100 
        } 
        Button{ 
         text: "next" 
         onClicked:{ 
          MyScript.createSpriteObjects(position) 
          position+=50 
          stack.push(secondPage) 
         } 
        } 
       } 
      } 
      Component{ 
       id: secondPage 
       Rectangle{ 
        id:secondRect 
        Label{ 
         text: "secondPage" 
         x:100 
        } 
        Button{ 
         text: "back" 
         onClicked: stack.push(firstPage) 
        } 
       } 
      } 
     } 
    } 
} 

在QT網站描述

JavaScript代碼（componentCreation.js）

var component; 
    var sprite; 
    function createSpriteObjects(number) { 
     component = Qt.createComponent("ButtonD.qml"); 
     if (component.status == Component.Ready) 
      finishCreation(number); 
     else 
      component.statusChanged.connect(finishCreation); 
    } 
    function finishCreation(number) { 
     if (component.status == Component.Ready) { 
      sprite = component.createObject(main, {"x": 50, "y": number}); 
      number += 50 
      if (sprite == null) { 
       console.log("Error creating object"); 
      } 
     } else if (component.status == Component.Error) { 
      console.log("Error loading component:", component.errorString()); 
     } 
    }  

按鈕，我想添加

import QtQuick 2.0 
import QtQuick.Controls 1.4 
Button{ 
    text: "created" 
} 

Answer 1

what should I write in

sprite = component.createObject(main, {"x": 100, "y": 500}); 

instead of main? i want to add a button from the javascript code to the rectangle with id secondRect

這給CreateObject第一個參數是要添加對象到項目的ID，所以不是答案小號econdRect？

Answer 2

好吧，就像米奇已經指出你的示例代碼不完整。

但是，我認爲的問題是，finishCreation()函數不知道'主'ID。

var component; 
var sprite; 

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

    function finishCreation() { 
     if (component.status == Component.Ready) { 
      sprite = component.createObject(main, {"x": 100, "y": 500}); 
      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()); 
     } 
    } 

因此，也許你應該參考傳遞給以上（未經測試）功能：

var component; 
    var sprite; 

     function createSpriteObjects(parentId) { 
      component = Qt.createComponent("ButtonD.qml"); 
      if (component.status == Component.Ready) { 
       if (component.status == Component.Ready) { 
       sprite = component.createObject(parentId, {"x": 100, "y": 500}); 
       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()); 
      }     
      } else { 
       var thatParentId = parentId; 
       component.statusChanged.connect(function() { 
        if (component.status == Component.Ready) { 
        sprite = component.createObject(thatParentId, {"x": 100, "y": 500}); 
        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()); 
        }  
       }); 
     } 
    } 

之後，你可以調用MyScripts.createSpriteObjects(secondRect);