JavaScript中创建动态 QML 对象的方法

更新时间：2021年12月14日 17:24:51 作者：友善啊，朋友

这篇文章主要介绍了 JavaScript中创建动态 QML 对象，下面文章主要分析了两中方法，分别是从 QML 字符串创建对象和动态创建组件以及删除对象等方法，具有有一定的参考价值，需要的小伙伴可以参考一下

一、动态创建对象

有两种方法可以从 JavaScript 动态创建对象：

调用 Qt.createComponent() 动态创建 Component 对象
使用 Qt.createQmlObject() 从 QML 字符串创建对象

虽然动态创建的对象可以与其他对象一样使用，但它们在 QML 中没有 id。

1.1、动态创建组件

可以调用它的 createObject() 方法来创建该组件的一个实例。这个函数可以接受两个参数：

第一个是新对象的父对象。父对象可以是图形对象（即 Item 类型）或非图形对象（即 QtObject 或 C++ QObject 类型）。只有带有图形父对象的图形对象才会被渲染到 Qt Quick 可视画布上。如果希望稍后设置父级，可以安全地将 null 传递给此函数。
第二个是可选的，是一个属性值对的映射，它定义了对象的初始任何属性值。此参数指定的属性值在对象创建完成之前应用于对象，避免在必须初始化特定属性以启用其他属性绑定时可能发生的绑定错误。此外，与在创建对象后定义属性值和绑定相比，性能优势很小。
示例。

Sprite.qml 它定义了一个简单的 QML 组件：

import QtQuick 2.0
 
Rectangle { width: 80; height: 50; color: "red" }

main.qml 导入了一个 componentCreation.js JavaScript 文件，该文件将创建 Sprite 对象：

import QtQuick 2.0
import "componentCreation.js" as MyScript
 
Rectangle 
{
    id: appWindow
    width: 300; height: 300
 
    Component.onCompleted: MyScript.createSpriteObjects();
}

componentCreation.js

var component;
var sprite;
 
function createSpriteObjects() 
{
    component = Qt.createComponent("Sprite.qml");
    if (component.status == Component.Ready)
        finishCreation();
    else
        component.statusChanged.connect(finishCreation);
}
 
function finishCreation() 
{
    if (component.status == Component.Ready) 
    {
        sprite = component.createObject(appWindow, {x: 100, y: 100});
        if (sprite == null) 
        {
            console.log("Error creating object");
        }
    } 
    else if (component.status == Component.Error) 
    {
        console.log("Error loading component:", component.errorString());
    }
}

当使用带有相对路径的文件时，路径应该是相对于执行 Qt.createComponent() 的文件。

也可以通过 incubateObject() 函数在不阻塞的情况下实例化组件。

1.2、从 QML 字符串创建对象

可以使用 Qt.createQmlObject() 函数从 QML 字符串创建 QML 对象，如下例所示：

const newObject = Qt.createQmlObject(`
    import QtQuick 2.0
    Rectangle 
    {
        color: "red"
        width: 20
        height: 20
    }
    `,
    parentItem,
    "myDynamicSnippet"
);

第一个参数是要创建的 QML 字符串。
第二个参数是新对象的父对象，适用于组件的父参数语义同样适用于 createQmlObject() 。
第三个参数是与新对象关联的文件路径，这用于错误报告。

如果 QML 字符串使用相对路径导入文件，则路径应该相对于定义父对象（方法的第二个参数）的文件。

在构建静态 QML 应用程序时，会扫描 QML 文件以检测导入依赖项。这样，所有必要的插件和资源都会在编译时解决。但是，这仅考虑显式导入语句（位于 QML 文件顶部的语句），而不考虑包含在字符串文字中的导入语句。为了支持静态构建，用户需要确保使用 Qt.createQmlObject() 的 QML 文件在文件顶部明确包含所有（包括字符串文字内部）必要的导入。

二、动态删除对象

在许多用户界面中，将可视对象的不透明度设置为 0 或将可视对象移出屏幕而不是将其删除就足够了。但是，如果有大量动态创建的对象，则删除未使用的对象可能会获得有价值的性能优势。

请注意：永远不应该手动删除由便利 QML 对象工厂（例如 Loader 和 Repeater）动态创建的对象。此外，应该避免删除不是自己动态创建的对象。

可以使用 destroy() 方法删除项目。此方法有一个可选参数（默认为 0），用于指定销毁对象之前的近似延迟（以毫秒为单位）。

示例。application.qml 创建 SelfDestroyingRect.qml 组件的五个实例。每个实例运行一个 NumberAnimation，当动画完成时，调用它的根对象上的 destroy() 来销毁自己：

application.qml

import QtQuick 2.0
 
Item 
{
    id: container
    width: 500; height: 100
 
    Component.onCompleted: 
    {
        var component = Qt.createComponent("SelfDestroyingRect.qml");
        for (var i=0; i<5; i++) 
        {
            var object = component.createObject(container);
            object.x = (object.width + 10) * i;
        }
    }
}

SelfDestroyingRect.qml

import QtQuick 2.0
 
Rectangle 
{
    id: rect
    width: 80; height: 80
    color: "red"
 
    NumberAnimation on opacity 
    {
        to: 0
        duration: 1000
 
        onRunningChanged: 
        {
            if (!running) 
            {
                console.log("Destroying...")
                rect.destroy();
            }
        }
    }
}

或者，application.qml 可以通过调用 object.destroy() 销毁创建的对象。

请注意：对该对象内的对象调用 destroy() 是安全的。对象不会在调用 destroy() 的瞬间被销毁，而是在该脚本块结束和下一帧之间的某个时间被清除（除非指定了非零延迟）。

另请注意，如果 SelfDestroyingRect 实例是像这样静态创建的：

Item 
{
    SelfDestroyingRect 
    {
        // ...
    }
}

这会导致错误，因为对象只有在动态创建时才能动态销毁。

使用 Qt.createQmlObject() 创建的对象可以类似地使用 destroy() 销毁：

const newObject = Qt.createQmlObject(`
    import QtQuick 2.0
    Rectangle 
    {
        color: "red"
        width: 20
        height: 20
    }
    `,
    parentItem,
    "myDynamicSnippet"
);
newObject.destroy(1000);

到此这篇关于 JavaScript中创建动态 QML 对象的方法的文章就介绍到这了,更多相关 JavaScript 创建动态 QML 对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解js正则表达式验证时间格式xxxx-xx-xx形式
本篇文章主要介绍了详解js正则表达式验证时间格式xxxx-xx-xx形式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
ESLint详解及在WebStorm中的应用步骤
ESLint是一种JavaScript代码检查工具,开发者可以通过自定义规则进行代码风格和质量的控制,使用ESLint的过程包括安装、初始化配置、配置规则、运行ESLint检查代码、与编辑器集成,以及与构建工具集成等,需要的朋友可以参考下
2024-09-09
Javascript Request获取请求参数如何实现
使用Javascript Request获取参数的时候总是提示出错，本文为此问题提供详细的解决方案，需要了解的朋友可以参考下
2012-11-11
ES5新增数组的实现方法
这篇文章主要介绍了ES5新增数组的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
Bootstrap实现带暂停功能的轮播组件(推荐)
最近小编在项目中用到了一款带轮播组件，功能非常齐全，可以设置各种标题样式、动画效果、轮播时间、开始暂停等功能，下面小编通过本文给大家详细介绍下实现过程，需要的朋友参考下吧
2016-11-11
详解用webpack把我们的业务模块分开打包的方法
本篇文章主要介绍了用webpack把我们的业务模块分开打包的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
分享5个小技巧让你写出更好的 JavaScript 条件语句
在使用 JavaScript 时，我们常常要写不少的条件语句。这里有五个小技巧，可以让你写出更干净、漂亮的条件语句。需要的朋友跟随小编一起学习吧
2018-10-10
javascript页面倒计时实例
这篇文章主要介绍了javascript页面倒计时实现方法,可实现简单的页面倒计时及自动提交表单功能,非常简单实用,需要的朋友可以参考下
2015-07-07
JS小知识之如何将CSV转换为JSON字符串
CSV文件一般是以逗号为分隔值的文件(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本),下面这篇文章主要给大家介绍了JS小知识之如何将CSV转换为JSON字符串的相关资料,需要的朋友可以参考下
2023-06-06
Javascript获取HTML静态页面参数传递值示例
获取HTML静态页面参数传递值可以利用split函数来按参数切成数组、利用正则表达式来获取，具体实现如下，感兴趣的朋友可以参考下
2013-08-08