qml使用Loader动态创建和删除组件
//SubComponent.qml
import QtQuick 2.12
Rectangle {
id: subRect
color: "red"
width: 200
height: 100
property string strText
Text {
id: name
text: strText
color: "white"
anchors.centerIn: parent
}
Component.onCompleted: {
console.log("SubComponent===========Component.onCompleted=====")
}
Component.onDestruction: {
console.log("SubComponent===========Component.onDestruction=====")
}
}
//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Loader {
id: loadSubComponent
anchors.top: parent.top
anchors.topMargin: 100
anchors.left: parent.left
anchors.leftMargin: 50
onLoaded: {
if(item != null){
item.color = "blue"
item.strText = "Loader"
}
}
onFocusChanged: {
if(item != null) {
item.focus = focus
}
}
}
Row {
spacing: 5
anchors.fill: parent
Button {
text: qsTr("add")
onClicked: {
console.log("============SubComponent.qml=========")
loadSubComponent.source = "qrc:/SubComponent.qml"
loadSubComponent.item.color = "green"
loadSubComponent.item.strText = "Hello"
}
}
Button {
text: qsTr("delete")
onClicked: {
console.log("=============delete Component================")
loadSubComponent.sourceComponent = undefined
loadSubComponent.source = ""
}
}
}
}