javascript - 如何在 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 数组，您可以在其中存储对现有图像的引用。因此，每次按下按钮时 - 删除现有图像(如果有)，然后创建新图像并将它们插入数组中。通过这种方式，您还可以节省连接和事件处理的费用。