如何在 QML 中的同一事件之后创建/销毁动态对象？

Question

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

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 条带有相同点击事件的“破坏图像”消息）

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

Answer 1

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

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

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