如何动态销毁/删除QML组件

Question

我正试图根据用户与QML中复选框的交互来动态创建并销毁组件。选中复选框，创建组件。勾选复选框，销毁组件。创建组件是可行的，但销毁组件则不然。组件仍然存在。

QT文档中的文档提到，destroy方法应该在创建组件后工作。你知道我在这里做错了什么吗？下面给出的代码。

import QtQuick 2.7
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1
Rectangle {
property var deficiencyType
width: 600
height: 800
color:"white"
CheckBox {
id:checkbox
text: "Check deficiency on/off"
onClicked: {
if (checked) {
deficiencyType = Qt.createComponent("Form.qml")
deficiencyType.createObject(columnRef)
} else {
deficiencyType.destroy()
console.log(deficiencyType)
}
}
}
ColumnLayout {
id:columnRef
Layout.fillHeight: true
Layout.fillWidth: true
anchors {
top: checkbox.bottom
topMargin: 10
}
}
}

Answer 1

正如@Alaenix所说，Loader可能会为您工作。但要直接回答您的问题，destroy((的问题是您正在销毁组件，而不是您创建的对象。因此更改此代码：

deficiencyType = Qt.createComponent("Form.qml")
deficiencyType.createObject(columnRef)

到此：

var component = Qt.createComponent("Form.qml")
deficiencyType = component.createObject(columnRef)

应该可以解决你的问题。

Answer 2

对于这个用例，您可以使用Loader，如下所示：

import QtQuick 2.7
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1
Rectangle {
width: 600
height: 800
color:"white"
CheckBox {
id: checkBox
text: "Check deficiency on/off"
}
ColumnLayout {
Layout.fillHeight: true
Layout.fillWidth: true
anchors {
top: checkbox.bottom
topMargin: 10
}
Loader {
id: formLoader
active: checkBox.checked
source: "Form.qml"
}
}
}

有几种方法可以处理动态QML组件。你也应该检查这些：

• 即时战士
• 中继器

编辑：

要处理从特定模型动态创建的几个项目，您应该使用这样的中继器：

import QtQuick 2.7
import QtQuick.Layouts 2.14
import QtQuick.Controls 2.14
Rectangle {
width: 600
height: 900
color:"white"
property ListModel forms: ListModel {
ListElement {
formName: "Form one"
formSource: "Form1.qml"
}
ListElement {
formName: "Form two"
formSource: "Form2.qml"
}
ListElement {
formName: "Form three"
formSource: "Form3.qml"
}
}
RowLayout {
anchors.fill: parent
Repeater {
model: forms
delegate: Item {
CheckBox {
id: checkBox
text: "Check " + modelData.formName + " on/off"
}
ColumnLayout {
Layout.fillHeight: true
Layout.fillWidth: true
anchors {
top: checkbox.bottom
topMargin: 10
}
Loader {
active: checkBox.checked
source: modelData.formSource
}
}
}
}
}
}