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);