通过JavaScript创建Qml对象

有两种方法可以创建,都是全局对象Qt提供的方法

一:用Qt.createComponent加载一个qml文件并创建Component

二:用Qt.createQmlObject从一个qml字符串创建Component

注意,以上两种方法返回的是Component,Component在QML中是一种类型,参考文档:

http://qt-project.org/doc/qt-5/qml-qtqml-component.html#details

因此还要调用Component的createObject来创建真正可用的对象。createObject第一个参数是指定挂在谁的下方,也就是父窗口是谁。如果传递null,则代表暂时不显示。

如果要销毁,只需要调用对象的destroy方法即可。

调用createObject方法需要注意qml文件已经被加载完成才行,因为这种机制允许远程加载qml文件,所以需要检查Component的status属性:

This property holds the status of component loading. The status can be one of the following:
Component.Null - no data is available for the component
Component.Ready - the component has been loaded, and can be used to create instances.
Component.Loading - the component is currently being loaded
Component.Error - an error occurred while loading the component. Calling errorString() will provide a human-readable description of any errors.

This property holds the status of component loading. The status can be one of the following:

Component.Null - no data is available for the component

Component.Ready - the component has been loaded, and can be used to create instances.

Component.Loading - the component is currently being loaded

Component.Error - an error occurred while loading the component. Calling errorString() will provide a human-readable description of any errors.

下面是例子代码:

function createItem() {
    if (itemComponent.status == Component.Ready && draggedItem == null) {
        draggedItem = itemComponent.createObject(
        window,
        {
        "image": paletteItem.image,
        "x": posnInWindow.x,
        "y": posnInWindow.y,
        "z": 3
        }
    );
        // make sure created item is above the ground layer
    } else if (itemComponent.status == Component.Error) {
        draggedItem = null;
        console.log("error creating component");
        console.log(itemComponent.errorString());
    }
}

注意在JavaScript中没有真正的类型,类型也是由对象模拟的。所以Qml 的Component在JavaScript代码中也表现为一个对象,比如上面代码的itemComponent就是Qml的Component,但也是一个对象。用它的createObject再创建真正可用的对象挂在window对象下面。

官方文档参考:

http://qt-project.org/doc/qt-4.8/qdeclarativedynamicobjects.html

http://qt-project.org/doc/qt-5/qml-qtqml-qt.html#createComponent-method

http://qt-project.org/doc/qt-5/qml-qtqml-qt.html#createQmlObject-method

这就和web开发用JavaScript动态创建HTML的tag并插入到DOM模型中很像了。

时间: 2024-08-11 01:22:19

通过JavaScript创建Qml对象的相关文章

JavaScript创建Map对象(转)

JavaScript 里面本身没有map对象,用JavaScript的Array来实现Map的数据结构. Js代码   /* * MAP对象,实现MAP功能 * * 接口: * size()     获取MAP元素个数 * isEmpty()    判断MAP是否为空 * clear()     删除MAP所有元素 * put(key, value)   向MAP中增加元素(key, value) * remove(key)    删除指定KEY的元素,成功返回True,失败返回False * 

Javascript创建空对象和空数组的几个方法和差别

以下是三种创建空对象的方法: var emptyObj1 = {}; var emptyObj2 = new Object(); var emptyObj2 = Object.create(Object.prototype); 他们对Javascript来说是一样的,新创建的三个对象会继承object所有的属性和方法,所以emptyObj1.toString等于Object.prototype.toString.但是要注意,{}.toString是会报错的! 类似的还有空数组问题: var em

JavaScript—创建正则对象

创建正则对象 方式1: var reg = new RegExp('\d', 'i');var reg = new RegExp('\d', 'gi'); 方式2: var reg = /\d/i;var reg = /\d/gi; 参数 标志 说明 i 忽略大小写 g 全局匹配 gi 全局匹配+忽略大小写 原文地址:https://www.cnblogs.com/sylys/p/11629379.html

JavaScript创建自定义对象

// 1.工厂函数(factory function) function createCat(catName) { var oCat = new Object(); oCat.name = catName; oCat.color = "black"; oCat.call = "Miao~"; oCat.run = function() { alert(this.name + " is running!"); }; return oCat; } v

javascript创建类对象

正确样例: var Person=function(name,age){ this.Name=''; this.Age=''; this.Say=function(msg){ alert(msg); } this.init=function(name,age){ this.Name=name; this.Age=age; } this.init(name,age); var fun=function(){ alert('fun'); } this.funShow=function(){ fun(

Qt Quick 组件和动态创建的对象具体的解释

在<Qt Quick 事件处理之信号与槽>一文中介绍自己定义信号时,举了一个简单的样例.定义了一个颜色选择组件,当用户在组建内点击鼠标时,该组件会发出一个携带颜色值的信号,当时我使用 Connections 对象连接到组件的 colorPicked 信号,改变文本的颜色. 当时用到的 Component . Loader 两个特性,一直没来得及介绍,可能非常多人都还在雾里看花呢. 这次呢.我们就来仔细致细地把他们讲清楚. 版权全部 foruok ,转载请注明出处:http://blog.csd

Ajax 学习之创建XMLHttpRequest对象------Ajax的核心

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><h

JavaScript日期时间对象的创建与使用(三)

时钟效果一: 代码: <html> <head> <meta charset="utf-8"/> <title>JavaScript日期时间对象的创建与使用</title> </head> <body> <h2 id="time"></h2> <script type="text/javascript"> function Cl

JavaScript中创建自定义对象的方法

本文内容参考JavaScript高级程序设计(第3版)第6章:面向对象的程序设计 ECMA-262中把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”我所理解的就是对象就是一个结构体,结构体中有一些它的基本属性以及对结构体处理的方法,把它们封装起来称为一个整体.JS中所有的对象都是基于一个引用类型创建,这个引用类型可以是原生类型,如Array,Date等,也可以是开发人员自定义的类型. 下面主要总结下JS中创建对象的几种模式,分析他们各自的优缺点. 1. 工厂模式 /****