您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

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

51自学网 2022-02-21 13:35:36
  javascript

一、动态创建对象

有两种方法可以从 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.0import "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
下载地址:
详解Vue3的响应式原理解析
vue3组件通信的方式总结及实例用法

万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。