qml/Quick Component和Loader组件的联系

1.Loader加载组件的时机

• Loader加载组件的时机取决于其source属性的赋值时机。

1. 声明式加载：
   当你在QML文件中使用Loader并给定了source属性时，加载会在Loader所在的QML文件加载时自动触发。这意味着一旦Loader所在的QML文件加载完成，Loader就会开始加载它的内容形成一个组件。
2. 动态加载：
   你也可以在运行时动态地改变Loader的source属性。只要你在程序运行时改变了source属性，Loader就会重新加载指定路径的组件。这可以通过在QML中的JavaScript代码中直接修改source属性来实现。

2.Component和Loader加载组件的联系

1. Component介绍
   • 1个组件通常由1个qml文件定义(单独文件定义组件), 也可以在qml里面通过Component对象来嵌入式定义组件。
   • Component的嵌入式定义的组件一开始不会显示，除非使用Loader或者js函数createObject创建这个组件的一个实例
   • Component的语义就是一个自定义组件的模板
2. Loader介绍
   • Loader用来加载组件的一个元素，这个元素的作用就是加载其他组件，当Loader加载了组件之后，完全可以将原来Loader的位置看成是你新加载的组件
   • Loader的语义就是一个具有加载组件的功能的元素
3. 接下来我创建两个文件进行演示

//BlueBox.qml
Rectangle {
    id:container
    color: "#89a1ff"
    implicitHeight: 50
    implicitWidth: 50
    Text {
        text: "矩形"
        anchors.centerIn: parent
        font.pixelSize: 20
    }
}

//main.qml
ApplicationWindow {
    id:root
    width: 640
    height: 480
    visible: true
    title: qsTr("Component和Loader")
    property string path: ""
    MouseArea{
        anchors.fill: parent
        onClicked: {
            path = "./BlueBox.qml"
            loadComponent()
        }
    }

    //1.Loader加载组件(source)
    Loader{
        id:loader1
        source: path
    }

    //2.Component加载组件
    Component{
        id:component1
        BlueBox{
            x: 50
            color: "#fd5689"
        }
    }

    //3.Loader加载Component组件
    Loader{
        y:50
        id:loader2
        sourceComponent: component1
    }

    function loadComponent(){
        component1.createObject(root)
    }
}

4. 结论
   • 可以看到Loader的作用其实类似于Component::createObject()函数
   • 而Component的作用类似于BlueBox.qml这样一个文件
   • 所以这两个元素在加载组件的过程中所扮演的角色是不同的

3.Component和Loader的嵌套使用

• 在之前的main.qml文件中添加以下内容

    // 4.Component和Loader复用加载组件
    Component{
        id:component2
        BlueBox{
            x:100
            width: 100
            height: 100
            color: "#fd5689"
            Loader{
                id:loader2
                source: path
                anchors.centerIn: parent
            }
        }
    }

    // 5.Loader和Component复用加载组件
    Loader{
        id:loader3
        source: path
        x: 200
        width: 100
        height: 100
        Component{
            id:component3
            BlueBox{
                color: "#fd5689"
                anchors.centerIn: parent
            }
        }
    }
    function loadComponent(){
        component2.createObject(root)
        component3.createObject(loader3)
    }