QML Component 与 Loader 结合动态加载组件
在实际项目中，有时候我们写好一个组件，但不是立即加载出来，而是触发某些条件后才动态的加载显示出来，当处理完某些操作后，再次将其关闭掉；
这样的需求，可以使用 Component 包裹着组件，然后使用 Loader 去动态的加载和关闭；
Component 可以加载任何部件，例如，Rectangle，Button，Image等等
如果需要包裹多个部件，使用 Item { } 包裹着这些部件即可；
Component {Item {Rectangle { }Button { }......}
}Component 有两个很常用信号，就是创建前触发和销毁前触发，类似构造函数和析构函数，也可以说时回调；
只需要在定义该槽函数即可
Window {id: root// 窗口创建时触发 Component.onCompleted: { root.x = 200 root.y = 200 root.color = "green" console.log("onCompleted", width, height) }// 窗口销毁时触发 Component.onDestruction: { console.log("onDestruction") }
} 窗口创建销毁前都会去执行相应方法
下面是使用Component加载一个 Rectangle
Component { id: com Rectangle { id: rect width: 200 height: 100 color: "red" }
} 如果直接这样写上去，程序运行后，是不会在窗口中有加载Rectangle出来的，需要使用Loader 去动态加载才行
Loader { id: loader sourceComponent: com // 加载id为 com 的组件
} 
在Loader中有一个status状态可以用于判断窗口处于哪个阶段；
填写上 onStatusChanged: { } 槽函数，在status状态发生改变时，此槽函数回立即触发；
status 一共有四种状态：
Loader.Null - 未加载 - 0
Loader.Ready - 已加载 - 1
Loader.Loading - 加载中 - 2
Loader.Error - 加载错误 - 3
可以在槽函数中，根据这些状态去做某些相应的操作：
Loader { id: loader // 异步加载部件，当这个部件很大时，例如加载很大的图片，或者加载很大的数据，为了不卡死界面，需要使用异步加载 asynchronous: true sourceComponent: com onStatusChanged: { console.log("status:", status) if (2 == status) { // 处理一些操作 console.log("加载中...") } else if (1 == status){ // 处理以下操作 console.log("加载完毕.") } }
} 需要注意的是，加载中，需要在异步加载窗口的时候才会体现出来，即属性 asynchronous: true
当然，也可以在被加载的Rectangle部件中，写上Component.onCompleted: { } 和 Component.onDestruction: { }
这样当Rectangle被成功加载后，或者被关闭后都会触发槽函数；
Rectangle { id: rect width: 200 height: 100 color: "red" // 窗口创建时触发 Component.onCompleted: { console.log("onCompleted", width, height) } // 窗口销毁时触发 Component.onDestruction: { console.log("onDestruction") }
} 
那么，如何动态的去加载呢？
为了模仿这些场景，我们定义两个按钮，一个用于加载，一个用于关闭；
Button { x: 250 text: "关闭" onClicked: { loader.sourceComponent = null }
} Button { x: 250 y: 100 text: "显示" onClicked: { loader.sourceComponent = com }
} 将sourceComponent 赋值null即可将窗口隐藏，将sourceComponent 赋值Component的id即可加载显示；
现在将Loader中的sourceComponent置null；
Loader { id: loader sourceComponent: null......
}
当Rectangle被加载出来后，我们还能不能再修改他呢？
答案是可以的！
需要使用到loader.item属性；查看帮助文档介绍：
此属性保存当前加载的顶级对象。
那么也就是说，loader.item 也就相当于rect；即Rectangle的id；
新加第三个按钮，用于测试：
Button { x: 250 y: 200 text: "修改属性" onClicked: { loader.item.width = 50 loader.item.height = 50 loader.item.color = "green" }
}
另外 Loader的source属性可以加载自己编写的qml文件
Loader {id: loadersource: "/MyRectangle.qml"
}最后是代码分享：
import QtQuick 2.9
import QtQuick.Window 2.2import QtQuick.Controls 2.2Window {id: rootvisible: truewidth: 640height: 480title: qsTr("Hello World")color: "white"minimumWidth: 300minimumHeight: 400maximumHeight: 500maximumWidth: 400// 透明度//opacity: 0.5// 窗口创建时触发
// Component.onCompleted: {
// root.x = 200
// root.y = 200
// root.color = "green"
// console.log("onCompleted", width, height)
// }// // 窗口销毁时触发
// Component.onDestruction: {
// console.log("onDestruction")
// }// Component 可以加载任何部件，然后可以使用 Loader 去动态加载，然后也可以再动态销毁掉Component {id: comRectangle {id: rectwidth: 200height: 100color: "red"// 窗口创建时触发Component.onCompleted: {console.log("onCompleted", width, height)}// 窗口销毁时触发Component.onDestruction: {console.log("onDestruction")}}// Component 内部如果需要添加多个部件，需要使用Item包裹着
// Item {
// id: item_id
// Rectangle {
// id: rect1
// width: 60
// height:60
// color: "yellow"
// }
// Button {
// id: btn
// y:100
// text: "测试按钮"
// }
// Image { }
// }}Loader {id: loader// 异步加载部件，当这个部件很大时，例如加载很大的图片，或者加载很大的数据，为了不卡死界面，需要使用异步加载asynchronous: true//source: "/MyRectangle.qml"sourceComponent: comonStatusChanged: {console.log("status:", status)// 加载中if (2 == status) {// 处理一些操作console.log("加载中...")} else if (1 == status){// 处理以下操作console.log("加载完毕.")}}}Button {x: 250text: "关闭"onClicked: {loader.sourceComponent = null}}Button {x: 250y: 100text: "显示"onClicked: {loader.sourceComponent = com}}Button {x: 250y: 200text: "修改属性"onClicked: {loader.item.width = 50loader.item.height = 50loader.item.color = "green"}}
}
完！