动态Qml（三-创建和销毁对象）

• 加载一块QML代码时，它首先会被解释执行为一个组件。
• 这一步包含了加载依赖和验证代码。
• QML的来源可以是本地文件，Qt资源文件，或者一个指定的URL网络地址——这意味着加载时间不确定
• 组件创建之后，它的状态可以用来跟踪它的状态属性。
• 可以使用的状态值包括：

1. 组件为空 （Component.NULL）
2. 组件加载中（Component.Loading）
3. 组件可用 （Component.Ready）
4. 组件错误（Component.Error）

• 从空（NULL）状态到加载中（Loading）再到可用（Ready）通常是一个工作流
• 在任何一个阶段状态都可以变为错误（Error），在这种情况下，组件无法被用来创建新的对象实例
• 当加载连接缓慢的组件时，可以使用进度（progress）属性。它的范围从0.0意味着为加载任何东西，到1.0表明加载已完成

注解：先创建组件，此时需要放入组件文件（QML文件）所在的路径，然后使用创建出来的组件创建对象，参数为父亲、坐标！

代码：

import QtQuick 2.5

Image {
    width: 400
    height: 225
    anchors.fill: parent
    source: "image1.png"

    Image {
        id: overlay

        anchors.fill: parent

        source: "image2.png"

        opacity: 0;
        Behavior on opacity { NumberAnimation { duration: 300 } }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (overlay.opacity === 0)
                overlay.opacity = 1;
            else
                overlay.opacity = 0;
        }
    }
}

这是组件文件，逻辑很简单！

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 400
    height: 225
    title: qsTr("Hello World")

    Item {
        id: root
        anchors.fill: parent
        Component.onCompleted: createImageObject()
    }

    // js 代码
    // 创建组件的函数
    function createImageObject() {
        // ----
        // 创建组件
        var component = Qt.createComponent("qrc:/new/preFile/dynamic-image.qml")
        if (component.status === Component.Ready ||
                component.status === Component.Error) {
            finishCreation(component)
        } else {
            component.statusChanged.connect(finishCreation)
        }
    }

    function finishCreation(component) {
        if (component.status === Component.Ready) {
            // ----
            // 使用组件创建对象
            // root 父亲 / x，y 坐标
            var image = component.createObject(root,{"x": 100, "y": 100})
            if (image === null) {
                console.log("Error creating image")
            }
        } else if (component.status === Component.Error) {
            console.log("Error loading component:", component.errorString())
        }
    }
}

这个是main.qml文件，用于创建组件和对象并且判断状态！

只要由创建组件和对象的JS函数存在，我们可以随时创建，这里为了方便刚开始就创建了！

动态创建对象成功！