原文链接: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: 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很复杂的时候,进行动态创建就会出现卡界面的问题,此时才能体现异步的好处。
可以下载尝试一下:https://download.csdn.net/download/u011283226/11523056