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"}}
}

 

完！