如何在 QML 中的同一事件之后创建/销毁动态对象? [英] How to create/destroy dynamic objects after the same event in QML?

问题描述

我有一个 GridLayout dynamicLayout 动态创建/销毁元素.当我单击按钮 myButton 时会发生创建/销毁，为此我还提供了下面的代码.

I have a GridLayout dynamicLayout which has dynamically created/destroyed elements. Create/destroy happens when I click a Button myButton, for which I also provided the code below.

GridLayout {
    id: dynamicLayout
    anchors.fill: parent

    Component {
        id: imageComponent
        Image {
            visible: true
            function deleteImage() {
                console.log("destroying image")
                destroy()
            }
        }
    }
}

    Button {
    id: myButton
    visible: true
    x: 200
    y: 200

    onClicked: {
        createImageObjects();
    }
}


function createImageObjects() {
    if (imageComponent.status == Component.Ready)
        finishCreation();
    else
        imageComponent.statusChanged.connect(finishCreation);
}

function finishCreation() {
    if (imageComponent.status == Component.Ready) {
        for (var i= 0; i < 3; i++) {
            var object = imageComponent.createObject(dynamicLayout, {"width": 100, "height": 100, "source": FILE_PATH});
            if (object == null) {
                // Error Handling
                console.log("Error creating object");
            } else {
               myButton.clicked.connect(object.deleteImage)
            }
        }
    } else if (imageComponent.status == Component.Error) {
        // Error Handling
        console.log("Error loading component:", imageComponent.errorString());
    }
}

所以我打算做的是在单击按钮时将 3 个新图像添加到布局中，同时删除旧的 3 个图像.但是，首先创建较新的 3 个图像，然后立即销毁所有 6 个图像.(我收到 6 条具有相同点击事件的破坏图片"消息)

So what I intend to do is to add 3 new images to the layout when the button is clicked and while deleting the older 3 images. However, the newer 3 images are created first and after that all of the 6 images are destroyed at once. (I get 6 'destroying images' message with the same click event)

如何推迟连接到下一个点击事件?

How can I postpone the connecting to the next click event?

推荐答案

首先，不需要使用两步创建对象的方法——只有当你从远程源加载组件时才需要，这就完成了异步.从本地存储加载组件时，您实际上并不需要它，当您的 Component 在源代码中内嵌时更是如此.

First of all, there is no need to use the two step object creation method - it is only necessary when you are loading components from remote sources, which is done asynchronously. You don't really need that for loading components from local storage, even less so when your Component is in-line in the source.

第二，由于多个信号连接的堆叠方式，当你按下你的按钮时，你执行的是第一个连接，也就是创建函数，它增加了更多的连接，所以它们在第一个连接之后执行，导致立即删除刚刚创建的对象.没有一种很好的方式可以说直到下一次才处理这些连接".您可以使用计时器来延迟连接，但除了笨拙之外，这也为错误打开了空间.

Second, due to the way multiple signal connections stack, when you press your button, you execute the first connection which is the creation function, which adds more connections, so they are executed after the first connection, which leads to the immediate deletion of the objects that were just created. There isn't a nice way to say "don't process those connections until next time". You could use a timer to delay the connections, but aside from clumsy, that also opens room for bugs.

你的设计很糟糕.相反，您应该选择简单而实用的东西.例如，有一个 property var images : [] - 一个 JS 数组，您可以在其中存储对现有图像的引用.因此，每次按下按钮时 - 删除现有图像(如果有)，然后创建新图像并将它们推入阵列.您还可以通过这种方式节省连接和事件处理.

Your design is plain out bad. Instead you should go for something simple and functional. For example, have a property var images : [] - a JS array in which you store references to the existing images. So each time you press the button - delete the existing images if any, then create the new ones and push them into the array. You will also save on connections and event handling this way.

这篇关于如何在 QML 中的同一事件之后创建/销毁动态对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！