QML静态值与属性绑定

简述

QML 对象中的属性分配两种类型的值
静态值和绑定表达式，后者也称为属性绑定。

静态值：一个不依赖于其他属性的常数值。
绑定表达式：一个用于描述属性间依赖关系的 JavaScript 表达式。

静态值

所谓静态值，就是一个不依赖于其他属性的常数值。例如：width : 100，其中 100 就是一个静态值。

下面的示例，将 Rectangle 的 width 和 height 均分配为静态值。

import QtQuick 2.0

Rectangle {
    // 初始化赋值 - 静态值
    width: 200
    height: 200

    Rectangle {
        // 初始化赋值 - 静态值
        width: 100
        height: 100
        color: "blue"
    }
}

属性绑定

要创建一个属性绑定，需要为属性分配一个 JavaScript 表达式，该表达式将计算所需的值。
属性绑定几种形式

// 访问对象属性
width: parent.width / 2

// 使用内置的 JavaScript 对象 Math
width: Math.min(parent.width, parent.height)

// 使用三目运算符
width: parent.width > 100 ? parent.width : parent.width /2

// if-else 代码块中的 return 关键字可有可无
width: {
    if (parent.width > 100)
        return parent.width
    else
        return parent.width / 2
}

// 调用js方法
height: someMethodThatReturnsWidth()

属性绑定移除

具有绑定的属性将根据需要自动更新，但是，如果稍后从 JavaScript 语句为该属性重新分配一个静态值，则将会移除绑定。

例如，下面的蓝色 Rectangle 最初确保其 width 总是其 parent 的 width 的 1/4。但是，当按下空格键时，parent.width / 2 将作为静态值赋值给 width。随后，即使其 parent 的 width 发生变化，其 width 也将保持不变，因为静态值的分配移除了绑定。

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200

    Rectangle {
        id: rect
        width: parent.width / 4 //属性绑定
        height: 50
        color: "blue"

        focus: true
        Keys.onSpacePressed: {
            width = parent.width / 2 //属性绑定移除
        }
    }
}

属性绑定 Qt.binding()

如果目的是为了给蓝色 Rectangle 一个固定的 width 并停止自动更新，那么这没有任何问题。但是，如果是为了给 width 和其 parent 的 width 建立一个新的关系，那么新的绑定表达式必须被包裹在 Qt.binding() 函数中：

Keys.onSpacePressed: {
    width = Qt.binding(function() { parent.width / 2 })//属性绑定
}

现在，按下空格键后，矩形的高度将继续自动更新，始终为其 parent 的 width 的 1/2。