c++ - Qt5-QML : How to dynamically erase objects using a Button

Question

下面是我准备的一个最小示例的布局。这是执行所有必要操作后界面的打印屏幕，如果需要，还可以找到源代码 here :

在这一点上，我想使用 Button“清除列表”删除对象，我不再需要了，但我只获得了部分结果，如下所示:

预期的结果是删除所有对象和Button“清除列表”本身。单击按钮后的最终布局应如下所示:

我在最小示例中使用的代码如下，您可以复制/粘贴到您的计算机上，它会按原样运行:

import QtQuick 2.4
import QtQuick.Controls 2.12
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.12
import QtQuick.Controls.impl 2.12  // for IconLabel

ApplicationWindow {
    id: window
    width: 640
    height: 480
    visible: true

    function buttonClick(button)
    {
        button.text = qsTr(" YES Connecting");
        button.enabled = false;
        if (button.background && button.background instanceof Rectangle) {
            button.background.color = "green";
            button.background.gradient = null;
            button.background.visible = true;
        }
        if (button.contentItem && button.contentItem instanceof IconLabel) {
            button.contentItem.color = "white";
            button.contentItem.font.bold = true;
            button.contentItem.font.pointSize = 20;
        }
    }

    function buttonClearListOfObjects(buttonClear)
    {
        buttonClear.text = qsTr("Clear List");
        buttonClear.enabled = false;
        if (buttonClear.background && buttonClear.background instanceof Rectangle) {
            buttonClear.background.color = "red";
            buttonClear.background.gradient = null;
            buttonClear.background.visible = true;
        }
        if (buttonClear.contentItem && buttonClear.contentItem instanceof IconLabel) {
            buttonClear.contentItem.color = "white";
            buttonClear.contentItem.font.bold = true;
            buttonClear.contentItem.font.pointSize = 20;
        }
    }
    ColumnLayout {
        Button {
            id: dialogA
            text: pBar.running ? "Connecting..." : "Not - Connected"
            Layout.fillWidth: true
            font.pointSize: 20
            spacing: 10
            onClicked: {
                buttonClick(this)
                //pBar.startComputation()
            }
        }
        ColumnLayout {
            id: layout
            Layout.fillWidth: true
            spacing: 10
            GroupBox {
                id: box1
                width: parent.width
                title: "Connection"
                font.pointSize: 20
                Layout.fillWidth: parent
                spacing: 10

                GridLayout {
                    width: parent.width
                    columns: 1
                    RowLayout {
                        id: row1
                        spacing: 200
                        Layout.fillWidth: true
                        Layout.fillHeight: false
                        Label {
                            id: textField
                            text: "Connection:"
                            font.pointSize: 15
                            Layout.fillWidth: true
                        }
                        Text {
                            id: connected
                            text: qsTr("Not-Connected")
                            color: "red"
                            font.pointSize: 15
                            horizontalAlignment: Text.AlignRight
                            Layout.fillWidth: true
                            states: [
                                State {
                                    name: "connecting"
                                    //when: pBar.running
                                    PropertyChanges {
                                        target: connected
                                        text: qsTr("Connecting...")
                                        color: "blue"
                                        font.bold: true
                                    }
                                },
                                State {
                                    name: "connected"
                                    //when: !pBar.running && pBar.finished //   something.connected
                                    PropertyChanges {
                                        target: connected
                                        text: qsTr("Yes! Connected...")
                                        color: "green"
                                        font.bold: true
                                    }
                                }
                            ]
                        }
                    }
                }
            }
            GroupBox {
                id: boxprogress
                title: "Connection Progress"
                font.pointSize: 20
                Layout.fillWidth: parent
                width: parent.width
                spacing: 10
                GridLayout {
                    width: parent.width
                    columns: 1
                    RowLayout {
                        Layout.fillWidth: true
                        Layout.fillHeight: false
                        ProgressBar {
                            id: progressbar_id
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            width: parent.width
                            from: 0
                            to: 40
                            value: pBar.progress
                        }
                    }
                }
            }
        }
        Button {
            id: clist
            text: "Clear List"
            Layout.fillWidth: true
            font.pointSize: 20
            width: parent.width
            enabled: true
            onClicked: {
                buttonClearListOfObjects(this)
//                 var i = dialogA.children.length;
//                 dialogA.children[i-1].destroy()

                 var j = layout.children.length;
                 layout.children[j-1].destroy()

//                 var k = box1.children.length;
//                 box1.children[k].destroy()

//                 var l = row1.children.length;
//                 row1.children[l-1].destroy()

//                var ii = textField.children.length;
//                textField.children[ii].destroy()

                var jj = connected.children.length;
                connected.children[jj-1].destroy()

                var kk = boxprogress.children.length;
                boxprogress.children[kk-1].destroy()

                var kkk = clist.children.length;
                clist.children[kk-1].destroy()
            }
        }

    }
}

到目前为止我尝试了什么:

1) 经过大量研究后，我发现了以下 post这对于理解如何实际动态删除对象很有用。但具体来说，在我的例子中我没有使用 Qt.createQmlObject (...) 因为我对这个不够熟悉。

2) 之后，我继续寻找任何其他可能的资源来帮助我继续前进，我找到了 this post这也很有用，但没有包含我正在寻找的具体信息。

我从同一篇文章中了解到，删除对象是消除最后添加的对象的问题，这解释了循环中计数的减少。然而，在执行了类似的程序后，我只能删除示例的一部分。

3) 到目前为止，我从编译器获得了以下错误，如果这可能有用的话 TypeError: Cannot call method 'destroy' of undefined 我认为这与我如何摧毁 child 有关。

4) This post是我找到的最接近的，事实上我实现了它的一部分。

5) 很有意思的是this post too但问题仍然存在。

在我的例子中，我尝试继续并在正在删除子项的文档中选择了 destroy 函数，但我不确定它的好处。我这样说是因为，尽管我实现了解决方案，但我只能动态地部分删除对象

实现上面显示的布局我缺少什么？ 谢谢直接指正

Answer 1

你不应该销毁不是动态创建的对象。

关于 TypeError: Cannot call method 'destroy' of undefined，它的发生是因为 connected object has no children thus the jj是 0 并且 connected.children[-1] 是 undefined。

恕我直言，如果您想创建动态模板，您应该熟悉Qt.createQmlObject(...) 和其他类似方法。如果您没有在资源受限的嵌入式设备中运行您的应用程序，您也可以让这些控件不可见。

要使所需的组件不可见，您将有三个主要选项。

• 将 visible 绑定(bind)到应该使那些组件不可见的条件，这可能会变得非常复杂且难以维护。
• 通过您的函数设置这些对象的visible 属性，这可能会破坏之前可能的绑定(bind)。
• 通过相关父级的 states 属性完成整个工作，并在这些 states 中添加属性更改，并简单地更改函数中的状态名称。

您会发现很多关于这三个选项的示例。但为了让自己走在正确的轨道上，我强烈建议您选择状态路径。

这是从 State 复制的示例Qml 类型文档。

import QtQuick 2.0

Rectangle {
    id: myRect
    width: 100; height: 100
    color: "black"

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked';
    }

    states: [
        State {
            name: "clicked"
            PropertyChanges { target: myRect; color: "red" }
        }
    ]
}