Qt 之 QML中动态创建组件(同步/异步)的方法（转载）

本文主要是介绍Qt 之 QML中动态创建组件(同步/异步)的方法（转载），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原文链接：https://blog.csdn.net/u011283226/article/details/98978828

【写在前面】

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

1、使用 Loader。

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

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

【正文开始】

**
首先介绍 Loader：

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

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

例如：

.Component
{id: componentRectangle{id: backgroundcolor: "red"}
}Loader
{id: loaderanchors.fill: parent
}Button
{text: "loader create"font.pointSize: 12onClicked: loader.sourceComponent = component;
}Button
{text: "loader destroy"font.pointSize: 12onClicked: 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);}}