var QML基本类型

基本介绍

var类型是一个可以引用任何数据类型的通用属性类型。

它相当于一个常规的JavaScript变量。 例如，var属性可以存储数字，字符串，对象，数组和函数：

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属性的JavaScript对象的常规属性中的更改不会触发对访问它们的绑定的更新。 下面的例子将显示“汽车有四个轮子”，因为wheels属性的改变不会导致分配给text属性的绑定更新(相当于C++指针没有指向新的对象,仅仅是指向的对象中的属性改变了）：

Item {
    property var car: new Object({wheels: 4})

    Text {
        text: "车有" + car.wheels + " 个轮子";
    }

    Component.onCompleted: {
        car.wheels = 6;
    }
}

如果onCompleted内部改为car = new Object（{wheels：6}），那么文本会更新为“车有6个车轮”，因为车属性本身会发生变化(即C++中的指针指向了一个新的对象)，这会发出属性更改通知（即onXXX())。

关于值的初始化

QML语法定义属性值初始化赋值右侧的花括号表示绑定分配。 初始化var属性时可能会造成混淆，因为JavaScript中的空花括号({})可以表示表达式块或空对象声明。 如果您希望将var属性初始化为空的对象值，则应将花括号({})用小括号(())括起来。

Item {
    property var first:  {}   // nothing = undefined
    property var second: {{}} // empty expression block = undefined
    property var third:  ({}) // empty object
}

在前面的示例中，第一个属性绑定到空表达式，其结果未定义。 第二个属性绑定到包含单个空表达式块（{}）的表达式，该表达式同样具有未定义的结果。 第三个属性绑定到空对象上，因此该属性将使用该空对象值进行初始化。

同样，JavaScript中的冒号可以是对象属性值赋值，也可以是label。 因此，使用对象声明初始化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'
    }
}

http://doc.qt.io/qt-5/qml-var.html