QML Component 与 Loader 结合动态加载组件

最新推荐文章于 2025-03-31 14:16:00 发布

cpp_learners

最新推荐文章于 2025-03-31 14:16:00 发布

阅读量560

点赞数 5

分类专栏： QML 文章标签： qml qt Component Loader

本文链接：https://blog.csdn.net/cpp_learner/article/details/145787040

版权

QML 专栏收录该内容

10 篇文章

订阅专栏

在实际项目中，有时候我们写好一个组件，但不是立即加载出来，而是触发某些条件后才动态的加载显示出来，当处理完某些操作后，再次将其关闭掉；

这样的需求，可以使用 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: loader
        source: "/MyRectangle.qml"
}

最后是代码分享：

import QtQuick 2.9
import QtQuick.Window 2.2

import QtQuick.Controls 2.2

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "white"

    minimumWidth: 300
    minimumHeight: 400
    maximumHeight: 500
    maximumWidth: 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: com

        Rectangle {
            id: rect
            width: 200
            height: 100
            color: "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: com
        onStatusChanged: {
            console.log("status:", status)

            // 加载中
            if (2 == status) {
                // 处理一些操作
                console.log("加载中...")

            } else if (1 == status){
                // 处理以下操作
                console.log("加载完毕.")
            }
        }
    }


    Button {
        x: 250
        text: "关闭"
        onClicked: {
            loader.sourceComponent = null

        }
    }

    Button {
        x: 250
        y: 100
        text: "显示"
        onClicked: {
            loader.sourceComponent = com
        }
    }

    Button {
        x: 250
        y: 200
        text: "修改属性"
        onClicked: {
            loader.item.width = 50
            loader.item.height = 50
            loader.item.color = "green"
        }
    }
}

完！