Component和Loader元素

• Component：提前创建一个组件，内部有且仅有1个子元素，创建后不会立即生成，需要使用Loader元素进行加载
• Loader：用来加载qml文件或者Component元素，可以通过操作Loader来动态的创建和销毁元素，以及改变Component内部子元素的属性

举例：

使用Component封装了1个矩形。

点击按钮时，Loader元素加载这个Component,创建内部封装的矩形

再次点击时，Loader元素销毁掉这个Component内部封装的矩形

按下按钮时，通过Loader改变Component内部封装矩形的宽度和颜色

import QtQuick
import QtQuick.Controls

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

    //Completed信号，Window构造完成时。可以做一些逻辑
    Component.onCompleted: {
        console.log("onComplete",width,height);
    }

    //Destruction信号，Window销毁时
    Component.onDestruction: {
        console.log("onDestruction");
    }

    //创建一个Component，不会显示，需要搭配loader动态的创建和销毁内部封装的元素
    Component{
        id:component1
        //Component内部必须要有子元素,而且只能有一个
        Rectangle
        {
            width: 100;
            height: 100;
            color: "red"
        }
    }

    //Loaderde作用：动态的创建和销毁元素
    Loader{
        id:loader1;
        //加载源的可以是某个qml文件
        //source:"aaa.qml";

        //加载源也可以是某个定义好的Component元素
        sourceComponent: null;

        //loader内部加载的资源很大时，使能这个属性，可以异步加载内部资源，防止GUI的卡顿
        asynchronous: true;

        //loader的status属性有4种取值
        //1、Loader.Null - the loader is inactive or no QML source has been set
        //2、Loader.Ready - the QML source has been loaded
        //3、Loader.Loading - the QML source is currently being loaded
        //4、Loader.Error - an error occurred while loading the QML source
        //状态改变信号
        onStatusChanged: {
            console.log("status: ",status);
        }
    }


    Button{
        width:100;
        height: 50;
        x:200;
        text: "请按我"

        onClicked: {
            if(loader1.sourceComponent==null)
            {
                //比如按钮点击，指定上面loader的源，动态地加载一个Component
                loader1.sourceComponent=component1;
            }
            else
            {
                //比如按钮点击，指定上面loader的源为Null，动态地销毁一个Component
                loader1.sourceComponent=null;
            }
        }
    
        onPressed: {
            if(loader1.sourceComponent!=null)
            {
                //利用loader的item属性获取loader加载的Component内部包含的控件
                //按钮按下时，loader加载的元素的宽度和颜色变化
                loader1.item.width=50;
                loader1.item.color="green";
            }
        }
    }

}