QML如何创建动态组件

QML动态组件指的是按需分配，需要时我们就创建一个自定义组件，也就是所谓的对象延迟实例化，而不是在程序一开始就创建它，不需要时我们就把它销毁以节约内存，而不是传统意义上的隐藏或覆盖。我们可以使用Component与Loader，也可以使用JavaScript的形式来完成。

先来介绍一下Component——

progress属性，加载组件的过程，从0.0到1.0变化。

status属性，加载组件的状态，其枚举值分别是Component.Null/Ready/Loading/Error。

url属性，组件路径。

completed()附加信号，对象实例化完成后触发。

destruction()附加信号，对象开始销毁时触发。

object createObject(Item
parent, object properties)函数，创建对象。

string errorString()函数，错误描述。

object incubateObject(Item
parent, object properties,
enumeration
mode)函数，通过mode参数来异步或同步创建对象，mode的值可以是Qt.ASynchronous/Synchronous，默认为异步，返回值的属性有status、object、onStatusChanged、forceCompletion()，其中

forceCompletion()函数强制同步创建对象。

再来看一下Loader——

active属性，默认为true，设置成false时将不能加载组件。

asynchronous属性，默认为false，设置成true时异步加载组件。

item属性，只读属性，保存了成功加载的组件。

progress属性，只读属性，从0.0到1.0变化。

source属性，加载的组件是一个独立的QML文件。

sourceComponent属性，在同一个QML文件中加载组件。

status属性，加载组件的状态，其枚举值分别是Loader.Null/Ready/Loading/Error。

loaded()信号，组件成功加载时触发。

object setSource(url
source, object properties)函数，设置预加载组件路径。

在同一个QML文件中使用Component和Loader——

Component可封装我们想要的东西，对外只提供一个定义好的接口，也就是其id属性，然后我们就可以重复使用它了。如果某个QML文件重复使用的Component比较小，或者说Component在逻辑上属于某个QML文件，那么该Component就应该在这个QML文件中定义，此时的Loader用到的就是其sourceComponent属性，如下例子：

import QtQuick 2.2

Rectangle {
    width: 360; height: 360
    color: "lightblue"

    MouseArea {
        anchors.fill: parent
        onClicked: {
            loader.sourceComponent = component
            loader2.sourceComponent = component
        }
    }

    Component {
        id: component
        Rectangle {
            width: 80; height: 80
            color: "red"
        }
    }

    Loader { id: loader }
    Loader {
        id: loader2;
        anchors.centerIn: parent
        onLoaded: item.color = "green"
    }
}

由于Component不是继承自Item，所以使用anchors锚布局无效，但Loader可以使用。例子中单击鼠标时创建了两个组件，双击鼠标时又把这两个组件销毁了，销毁时需要设置sourceComponent属性值为undefined。

组件分离——

QML文件本身也可以是一个Component，这样就与使用它的QML文件分离开了，这样做的好处是该Component可以被多个QML文件使用，代码结构也清晰明了，此时的Loader用到的就是其source属性，如下例子：

// comp.qml as a separated Component
import QtQuick 2.2

Item {
    Row {
        spacing: 5
        Rectangle {width: 80; height: 80; color: "red" }
        Rectangle {width: 80; height: 80; color: "yellow" }
        Rectangle {width: 80; height: 80; color: "green" }
    }
}

// main.qml
import QtQuick 2.2

Rectangle {
    width: 360; height: 360
    color: "lightblue"

    MouseArea {
        anchors.fill: parent
        onClicked: {
            loader.source = "comp.qml"
            loader2.source = "comp.qml"
        }
        onDoubleClicked: {
            loader.source = ""
            loader2.source = ""
        }
    }

    Loader { id: loader}
    Loader { id: loader2; y: 100}
}

例子中单击鼠标时从外部加载了两个组件，双击鼠标时又把这两个组件销毁了，销毁时需要设置source属性值为“”即一个空值。

从QML文件中创建——

先使用Qt.createComponent(url,
mode, parent)从QML文件中创建一个组件，必要时可以根据Component.status属性判断创建状态，然后使用Component.createObject()在某个父对象下实例化对象，最后使用destroy()销毁对象，函数参数可以指定一个时间，单位是毫秒，默认为0，如下例子：

import QtQuick 2.2

Rectangle {
    property var object
    property var component

    width: 360; height: 360
    color: "lightblue"

    MouseArea {
        anchors.fill: parent
        onPressed: {
            component = Qt.createComponent("comp.qml")
            if(Component.Ready === component.status) {
                object = component.createObject(parent)
            }
        }
        onReleased: {
            object.destroy(2000)
        }
    }
}

例子中按下鼠标时从QML文件中创建了一个组件component并实例化一个对象object，释放鼠标时在2000毫秒后对象object销毁，但组件component还是存在的。

从QML字符串中创建——

使用Qt.createQmlObject(string
qml, object parent, string filepath)从QML字符串中创建，第一个参数是要创建对象的QML字符串，第二个参数指定要创建对象的父对象，第三个参数用于报告错误，例子如下：

import QtQuick 2.2

Rectangle {
    property var object

    width: 360; height: 360
    color: "lightblue"

    MouseArea {
        anchors.fill: parent
        onPressed: object = Qt.createQmlObject('import QtQuick 2.2; Rectangle { color: "red"; width: 100; 	height: 100; anchors.centerIn: parent }', parent, "dynamicSnippet")
        onReleased: object.destroy(1000)
    }
}

如果修改例子中Qt.creatQmlObject()的第一个参数的“color”为“colo”，程序运行时将会报错，这时第三个参数就派上用场了，且看错误提示如下：

Error: Qt.createQmlObject(): failed to create object:
qrc:///dynamicSnippet:1:33: Cannot assign to non-existent property "colo"

这里共列举了动态组件创建与销毁的四种方法，实际使用过程中可按需选择。