QML动态添加按钮

时间:2017-07-02 14:25:21

标签: javascript qml

我写了一个简单的代码,问题是如何将按钮添加到第一页而不是第二页。我有三个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网站(componentCreation.js)中描述的javaScript代码

    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"
}

2 个答案:

答案 0 :(得分:0)

  

我应该在

中写些什么
sprite = component.createObject(main, {"x": 100, "y": 500});
     

而不是主?我想将javascript代码中的按钮添加到id为secondRect的矩形

createObject的第一个参数是你要添加对象的项的id,所以不是答案secondRect?

答案 1 :(得分:0)

好吧,就像Mitch已经指出你的示例代码不完整。

然而,我认为问题是finishCreation()函数不知道' main'标识。

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