Qt_Note10_QML_Component&Loader

在 QML 中，Component 和 Loader 是两个重要的元素，用于动态创建和加载其他 QML 组件。

Component（组件）：

Component 是一个可重复使用的 QML 定义，类似于一个模板或类的概念。它可以定义一个独立的 QML组件，包含一组属性、信号、方法和子元素。Component 可以在需要的时候动态创建和实例化。
通过Component，你可以定义一个独立的 QML 组件，并在需要时以编程的方式创建该组件的实例。这种动态创建的方式使得 QML中的组件能够更加灵活地被使用和复用。

Loader（加载器）：

Loader 用于在运行时动态加载和实例化 QML 组件。它允许你根据条件或事件的发生，在运行时选择性地加载一个 QML 组件到当前的QML 界面中。 Loader允许你异步加载和卸载组件，以及在必要时实例化它们。这对于需要根据运行时条件动态加载不同组件的场景非常有用。例如，在根据用户操作加载不同的页面或视图时，可以使用Loader 来管理这些动态加载的组件。 Loader 通常与 Component 配合使用，其中 Loader 负责加载和实例化Component 定义的组件。
总结起来，Component 和 Loader 是 QML 中用于动态创建和加载组件的重要工具。Component允许你定义可重复使用的组件模板，而 Loader 则负责在运行时根据需要加载和实例化这些组件。这种动态性和灵活性使得在 QML中实现动态布局和动态加载组件变得更加方便和可扩展。

//Component&Loader
    //    //创建时
    //    Component.onCompleted: {
    //        console.log("onCompleted", width, height, color)
    //    }
    //    //销毁时
    //    Component.onDestruction: {
    //        console.log("onDestruction")
    //    }

//        Component{
//            id: com
//            Rectangle{
//                id: rect
//                width: 200
//                height: 100
//                color: "black"
//                //Component&Loader
//                //创建时
//                Component.onCompleted: {
//                    console.log("onCompleted", width, height, color)
//                }
//                //销毁时
//                Component.onDestruction: {
//                    console.log("onDestruction")
//                }
//            }
//        }

    Component {
        id: com
        //AnimatedImage可以加载动图gif speed控制速度
        Image {
            id: img
            source: "/../../qt_learning3/MyQQ/Image/Luffy.png"
            sourceSize.width: 200
            sourceSize.height: 200
        }
    }

        Loader{
            id: loader
            asynchronous: true
            source: "/MyRectangle.qml"
//            source: "/../../qt_learning3/MyQQ/Image/Luffy.png" //loader.status = 3
            sourceComponent: com
            onStatusChanged: {
                console.log("status:",status)
            }
        }

        Button {
            x: 200
            width: 50
            height: 50
            onClicked: {
                //loader.item.paused = !loader.item.paused  //控制动图暂停继续播放
                loader.item.width = 50
                loader.item.height = 50
                loader.item.color = "red"
//                loader.sourceComponent = null
            }
        }