[JavaScript知识库]QML属性绑定

可以为对象的属性分配一个静态值，该值在明确分配新值之前保持不变。 然而，为了充分利用 QML 及其对动态对象行为的内置支持，大多数 QML 对象使用属性绑定。

属性绑定是 QML 的一个核心特性，它允许开发人员指定不同对象属性之间的关系。 当属性的依赖关系值发生变化时，该属性会根据指定的关系自动更新。

在幕后，QML 引擎监视属性的依赖关系（即绑定表达式中的变量）。 当检测到更改时，QML 引擎会重新评估绑定表达式并将新结果应用于属性。

一、概述

要创建属性绑定，需要为属性分配一个 JavaScript 表达式，该表达式的计算结果为所需值。 简而言之，绑定可能是对另一个属性的引用。示例：

Rectangle
{
    width: 200; height: 200

    Rectangle 
    {
        width: 100
        height: parent.height
        color: "blue"
    }
}

每当父矩形的高度发生变化时，蓝色矩形的高度会自动更新为相同的值。

绑定可以包含任何有效的 JavaScript 表达式或语句，因为 QML 使用符合标准的 JavaScript 引擎。绑定可以访问对象属性、调用方法并使用内置的 JavaScript 对象，例如 Date 和 Math。

例1：

height: parent.height / 2

height: Math.min(parent.width, parent.height)

height: parent.height > 100 ? parent.height : parent.height/2

height: 
{
    if (parent.height > 100)
        return parent.height
    else
        return parent.height / 2
}

height: someMethodThatReturnsHeight()

例2：

Column {
    id: column
    width: 200
    height: 200

    Rectangle 
    {
        id: topRect
        width: Math.max(bottomRect.width, parent.width/2)
        height: (parent.height / 3) + 10
        color: "yellow"

        TextInput 
        {
            id: myTextInput
            text: "Hello QML!"
        }
    }

    Rectangle 
    {
        id: bottomRect
        width: 100
        height: 50
        color: myTextInput.text.length <= 10 ? "red" : "blue"
    }
}

在语法上，允许绑定具有任意复杂性。 但是，如果绑定过于复杂，例如涉及多行或命令式循环则可能表明该绑定不仅仅用于描述属性关系。复杂的绑定会降低代码性能、可读性和可维护性。重新设计具有复杂绑定的组件可能是个好主意，或者至少将绑定分解为一个单独的函数。 作为一般规则，用户不应依赖绑定的评估顺序。

二、从 JavaScript 创建属性绑定

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

例如，下面的 Rectangle 最初确保其高度始终是其宽度的两倍。但当按下空格键时，宽度*3 的当前值将作为静态值分配给高度。 之后，高度也将保持固定在此值。静态值的分配删除了绑定。

import QtQuick 2.0

Rectangle 
{
    width: 100
    height: width * 2

    focus: true
    Keys.onSpacePressed
    {
        height = width * 3
    }
}

如果打算在宽度和高度之间建立新的关系，则必须将新的绑定表达式包装在 Qt.binding() 函数中：

import QtQuick 2.0

Rectangle 
{
    width: 100
    height: width * 2

    focus: true
    Keys.onSpacePressed: 
    {
        height = Qt.binding(function() { return width * 3 })
    }
}

2.1、调试覆盖绑定

QML 应用程序中错误的一个常见原因是意外地用 JavaScript 语句中的静态值覆盖了绑定。为了帮助开发人员追踪此类问题，QML 引擎能够在由于命令式赋值而丢失绑定时发出消息。

为了生成此类消息，需要为 qt.qml.binding.removal 日志记录类别启用信息输出：

QLoggingCategory::setFilterRules(QStringLiteral("qt.qml.binding.removal.info=true"));?

2.2、将此与属性绑定一起使用

从 JavaScript 创建属性绑定时，可以使用 this 关键字来引用接收绑定的对象。这有助于解决属性名称的歧义。

Item 
{
    width: 500
    height: 500

    Rectangle 
    {
        id: rect
        width: 100
        color: "yellow"
    }

    Component.onCompleted: 
    {
        //                                           this 表示接受绑定的对象即rect
        rect.height = Qt.binding(function() { return this.width * 2 })
        console.log("rect.height = " + rect.height) // 输出 200
    }
}

上面的 Component.onCompleted 处理程序是在 Item 的范围内定义的。在这个范围内，width 指的是 Item 的宽度。要将 Rectangle 的高度绑定到它自己的宽度，绑定表达式必须明确引用 this.width（或者，rect.width）。