QML中动态创建组件(同步/异步)的方法

【写在前面】

        在 QML 中想要动态创建组件，一般有两种方法：

        1、使用 Loader。

        2、使用 JavaScript：Qt.createComponent()  / Qt.createQmlObject()。

        当然，这里不仅会介绍他们的一般用法，还有如何使用它们来进行同步/异步的创建。

---

【正文开始】

        首先介绍 Loader：

        很简单，我们可以先声明，然后通过动态设置它的 source / sourceComponent 来动态创建，区别是，source 是 url ( 即 qml 文件，实际上每一个 qml 文件就是一个 Component )，而 sourceComponent 是Component。

        销毁动态创建的方式也很简单，置空：source = "" 或 sourceComponen = undefined 即可

        例如：

    .
    .
    .

    Component
    {
        id: component
        Rectangle
        {
            id: background
            color: "red"
        }
    }

    Loader
    {
        id: loader
        anchors.fill: parent
    }

    Button
    {
        text: "loader create"
        font.pointSize: 12
        onClicked: loader.sourceComponent = component;
    }

    Button
    {
        text: "loader destroy"
        font.pointSize: 12
        onClicked: loader.sourceComponent = undefined;
    }

    .
    .
    .

        当然，Loader 有一个属性：
        asynchronous ( 异步 )，默认 false，它控制组件是否异步实例化，如果启用它，组件的加载状态由 status 告知，加载中为 Loader.Loading，完成后变为 Loader.Ready。因此，可以连接信号来进行加载完成后的工作。

        效果如下：

重点要讲的是另一种方式，使用 JavaScript：

        1、使用 object createQmlObject (string: qml, object: parent, string: filepath)，可以直接动态创建一个对象(JS对象)，这种方法很简单，并且只支持字符串(即 从字符串创建)。

        2、使用 Qt.createComponent() + Qt.createObject() 的组合或者 Qt.createComponent() + Qt.incubateObject() 的组合，要销毁它们，只需调用 destroy(int msec)。

        Qt.createComponent() + Qt.createObject() 主要用于同步创建：

    function sync_create()
    {
        var component = Qt.createComponent("page.qml", root);
        if (component.status === Component.Ready)
            component.createObject(root).destroy(1000);
    }

        Qt.createComponent() + Qt.incubateObject() 主要用于异步创建：

    function async_create()
    {
        var finishCreation = function()
        {
            if (component.status === Component.Ready)
            {
                print("Async Create Component Success")
                var incubator = component.incubateObject(root);
                if (incubator.status !== Component.Ready)
                {
                    incubator.onStatusChanged = function(status)
                    {
                        if (status === Component.Ready)
                        {
                            print("Async Create Object Success")
                            incubator.object.destroy(1000);
                        }
                    }
                }
            }
        }
        var component = Qt.createComponent("page.qml", Component.Asynchronous, root);
        if (component.status === Component.Ready)
        {
            print("Async Create Component Ready")
            finishCreation();
        }
        else
        {
            print("Async Create Component Not Ready")
            component.statusChanged.connect(finishCreation);
        }
    }

        它们的区别可以从下图看到，计数器是为了看到 UI 是否被冻结了：

        可以看到，异步创建不会完全冻结 UI (但仍然有部分冻结，可以看到计时器变慢了，原因暂时不详)。

        注意，object incubateObject(Item: parent, object: properties, enumeration: mode) 也可以用于同步创建，在第三个参数，它可以是 Qt.Synchronous / Qt.Asynchronous，默认为异步。

        注意，返回 object 是孵化器，创建的对象通过 object.object 获取。

---

【结语】

        我知道，有很多博客讲动态创建，但没人写同步/异步，因此很多东西都必须自己尝试。

        在qml很复杂的时候，进行动态创建就会出现卡界面的问题，此时才能体现异步的好处。

        可以下载尝试一下：QML中动态创建组件(同步/异步)的方法_qml动态创建组件,qml动态加载组件-C++文档类资源-CSDN下载