qml var类型详解

简介: qml var类型详解


  • 概述

qml中var 类型是可以引用任何数据类型的通用属性类型。
它相当于一个常规的 JavaScript 变量,可以存储数字、字符串、对象、数组和函数等等.


示例

Item {
    property var aNumber: 100
    property var aBool: false
    property var aString: "Hello world!"
    property var anotherString: String("#FF008800")
    property var aColor: Qt.rgba(0.2, 0.3, 0.4, 0.5)
    property var aRect: Qt.rect(10, 10, 10, 10)
    property var aPoint: Qt.point(10, 10)
    property var aSize: Qt.size(10, 10)
    property var aVector3d: Qt.vector3d(100, 100, 100)
    property var anArray: [1, 2, 3, "four", "five", (function() { return "six"; })]
    property var anObject: { "foo": 10, "bar": 20 }
    property var aFunction: (function() { return "one"; })
}

  • var 属性 的变更

需要注意的是,分配给 var 属性的 JavaScript 对象的常规属性的更改不会触发访问它们的绑定的更新。

示例

Item {
    property var car: new Object({wheels: 8})
    Text {
        text: "The car has " + car.wheels + " wheels";
    }
    Component.onCompleted: {
        car.wheels = 12;
    } 
 }

示例中wheels属性的更改不会重新评估并分配给“文本”属性的绑定,所以文本内容不会变化.
如果 onCompleted 处理处程序改为使用“car = new Object({wheels: 12}),则会使Text文本内容变更,因为这是car本体的变更,所以会发射通知.”


  • var 属性值初始化

QML 语法定义属性值初始化赋值右侧的花括号表示绑定赋值。这在初始化 var 属性时可能会造成混淆,因为 JavaScript 中的空花括号可以表示表达式块或空对象声明。
如果希望将 var 属性初始化为空对象值,则应将花括号括在括号中。

Item {
     //绑定到一个空表达式,其结果未定义
    property var first:  {}   // nothing = undefined 
    //属性绑定到包含单个空表达式块 ("{}") 的表达式,该表达式同样具有未定义的结果
    property var second: {{}} // empty expression block = undefined
    
    //属性绑定到一个表达式,该表达式被评估为一个空对象声明,因此该属性将使用该空对象值进行初始化。
    property var third:  ({}) // empty object
}

类似地,JavaScript 中的冒号可以是对象属性值赋值,也可以是代码标签。 因此,使用对象声明初始化 var 属性也可能需要括号

Item {
    property var first: { example: 'true' }    // example is interpreted as a label
    property var second: ({ example: 'true' }) // example is interpreted as a property
    property var third: { 'example': 'true' }  // example is interpreted as a property
    Component.onCompleted: {
        console.log(first.example) // prints 'undefined', as "first" was assigned a string
        console.log(second.example) // prints 'true'
        console.log(third.example) // prints 'true'
    }
}

  • variant与var对比
  • QtQuick 1.x
    property variant内部是QVariant。 对象被分配给variant变量时则会被转换为QVariantMap。
    从javascript访问该属性将导致QVariantMap转换回JS对象。
    javascript的函数,特殊的JS值(null,undefined)无法存储在"property
    variant"类型的属性中。

  • QtQuick 2.x
    property var内部是javascript值。 property var支持创建javascript的所有内容,包括函数引用。 仅当从C++(通过QObject::property()或QQmlProperty::read())访问时,才会转换为QVariant(将其他JS值转换为QVariant的转换规则相同)。
    在C ++端实现类型时,可以将QJSValue类用作属性/方法参数,以在C ++和QML/JS之间传输值,而不会造成类型/数据丢失。

  • 总结
    variant 类型和 var 类型一样在 QML 中都是泛型属性类型。只是 variant 类型已经过时了,仅用于支持旧的应用程序(向后兼容使用);新的 QML 应用程序应该使用 var 类型属性。
    所以,除非我们的应用程序还在支持比较老的版本的 Qt,否则不要在 QML 的代码中使用 variant 类型。
    下面是使用建议:

  • Qt 4.* 或者 QtQuick 1.* 中使用 variant 类型
  • Qt 5.* 或者 QtQuick 2.* 中最好使用 var 类型。

QML 数组或列表的声明/定义(declaration/definition)可以使用 Qt 4 的 variant 类型或 Qt 5 的 var 类型。但是如果预先知道 myArray 的类型和不可更改的内容,也可以使用属性 list<type>

目录
相关文章
|
3月前
|
JavaScript 前端开发
【JavaScript】let,const和var的区别
总的来说,随着ECMAScript 6(ES6)及后续版本的推广,`let`和 `const`因其增强的块级作用域和对变量行为的更严格控制,逐渐成为现代JavaScript编码实践中推荐使用的变量声明方式。而 `var`由于其历史遗留的局限性,正逐渐被边缘化,但在维护老代码或处理特定兼容性需求时仍需了解。
52 3
|
5月前
|
JavaScript 前端开发
var、let和const的作用及区别
这篇文章详细解释了JavaScript中`var`、`let`和`const`三种变量声明方式的作用及它们在作用域、可变性、变量提升等方面的区别,并提供了示例代码来阐明各自的特性和适用场景。
|
7月前
|
JavaScript 前端开发
JavaScript中的var变量详解:定义、提升与注意事项
JavaScript中的var变量详解:定义、提升与注意事项
192 2
|
7月前
|
JavaScript 前端开发
JavaScript语法关键点:变量用`var`、`let`、`const`声明
【6月更文挑战第22天】JavaScript语法关键点:变量用`var`、`let`、`const`声明;七种数据类型包括`Number`、`String`、`Boolean`、`Null`、`Undefined`、`Symbol`和`Object`;运算符如算术、比较、逻辑和赋值;流程控制有`if...else`、`switch`和各种循环。了解这些是JS编程的基础。
71 3
|
8月前
|
JavaScript 前端开发
var let const 的区别和使用场景
var let const 的区别和使用场景
67 3
|
8月前
|
JavaScript 前端开发
探索JavaScript中的let、const和var:区别与使用场景
探索JavaScript中的let、const和var:区别与使用场景
|
8月前
|
C++
QML语法之property属性
QML语法之property属性
353 3
|
编译器
说说var、let、const之间的区别?
说说var、let、const之间的区别?
78 0
|
8月前
|
人工智能 前端开发 Cloud Native
说说var、let、const之间的区别
说说var、let、const之间的区别
|
8月前
|
JavaScript 前端开发
JavaScript基础知识:`var`、`let` 和 `const` 的区别是什么?
JavaScript基础知识:`var`、`let` 和 `const` 的区别是什么?
71 0