QML- 属性绑定

一、概述

QML对象的属性可以被赋一个静态值，该值保持不变，直到显式地赋一个新值。但是，为了充分利用QML及其对动态对象行为的内置支持，大多数QML对象都是使用属性绑定。

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

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

二、 QML绑定使用

要创建属性绑定，需要为属性分配一个计算为所需值的JavaScript表达式。简单地说，绑定可以是对另一个属性的引用。以下面的例子为例，其中蓝色矩形的高度与其父矩形的高度绑定:

Rectangle {width: 200; height: 200Rectangle {width: 100height: parent.heightcolor: "blue"}
}

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

绑定其实就是在QML 里面用变量的方式表示一个值，QML可以包含任何有效的JavaScript表达式或语句，因为QML使用符合标准的JavaScript引擎。绑定可以访问对象属性、调用方法并使用内置的JavaScript对象(如Date和Math)。

下面是前面示例的其他绑定的写法:

height: parent.height / 2height: Math.min(parent.width, parent.height)height: parent.height > 100 ? parent.height : parent.height/2height: {if (parent.height > 100)return parent.heightelsereturn parent.height / 2
}height: someMethodThatReturnsHeight()

这样QML就使用时是非常的灵活的。

下面是一个涉及更多对象和类型的更复杂的例子:

Column {id: columnwidth: 200height: 200Rectangle {id: topRectwidth: Math.max(bottomRect.width, parent.width/2)height: (parent.height / 3) + 10color: "yellow"TextInput {id: myTextInputtext: "Hello QML!"}}Rectangle {id: bottomRectwidth: 100height: 50color: myTextInput.text.length <= 10 ? "red" : "blue"}
}

在前面的例子中，

• topRect width 依赖于 bottomRect，Width和column.width
• topRect 高度取决于column.height
• bottomRect 颜色取决于myTextInput.text.length

从语法上讲，绑定可以有任意的复杂度。 但是，如果绑定过于复杂(例如涉及多行或命令式循环)，则可能表明该绑定不仅仅用于描述属性关系。复杂的绑定会降低代码性能、可读性和可维护性。不要写得太复杂，因为写的时候爽，到时候等过几个月再维护的时候就知道什么是痛苦了。

如果组件间的绑定太过于复杂，就需要重新设计具有复杂绑定的组件，把这些内部复杂的给隐藏了，只是暴露一些小的简单的接口，或者至少将绑定分解为单独的函数。作为一般规则，用户不应该依赖于绑定的求值顺序。

三、从JavaScript创建属性绑定

具有绑定的属性将在必要时自动更新。但是，如果稍后从JavaScript语句中为该属性分配了静态值，则绑定将被删除。
例如，下面的矩形最初确保其高度始终是宽度的两倍。但是，当按下空格键时，width*3的当前值将作为静态值分配给height。在此之后，高度将保持固定在这个值，即使宽度改变。静态值的赋值删除了绑定。

import QtQuick 2.0Rectangle {width: 100height: width * 2focus: trueKeys.onSpacePressed: {height = width * 3}
}

如果目的是给矩形一个固定的高度并停止自动更新，那么这不是问题。但是，如果目的是在宽度和高度之间建立一个新的关系，那么新的绑定表达式必须包装在Qt.binding()函数中:

import QtQuick 2.0Rectangle {width: 100height: width * 2focus: trueKeys.onSpacePressed: {height = Qt.binding(function() { return width * 3 })}
}

现在，按下空格键后，矩形的高度将继续自动更新，始终是宽度的三倍。

1. 调试绑定的覆盖

QML应用程序中bug的一个常见原因是不小心用JavaScript语句中的静态值覆盖了绑定。为了帮助开发人员跟踪此类问题，每当由于命令式赋值导致绑定丢失时，QML引擎就能够发出消息。
为了生成这样的消息，您需要启用qt.qml.binding.removal日志类别的信息输出，例如通过调用:

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

有关启用日志类别输出的更多信息，请参阅QLoggingCategory文档。
注意，在某些情况下重写绑定是完全合理的。QML引擎生成的任何消息都应该被视为诊断辅助，而不一定是没有进一步调查的问题的证据。

2. 属性绑定使用 this

在JavaScript中创建属性绑定时，可以使用 this 关键字来引用接收绑定的对象。这有助于解决属性名称的歧义。
例如，组件。下面的onCompleted处理程序是在项目的范围内定义的。在这个范围内，width指的是元素的宽度，而不是矩形的宽度。要将矩形的高度绑定到自身的宽度，绑定表达式必须显式引用this。Width(或者使用rect.width):

Item {width: 500height: 500Rectangle {id: rectwidth: 100color: "yellow"}Component.onCompleted: {rect.height = Qt.binding(function() { return this.width * 2 })console.log("rect.height = " + rect.height) // prints 200, not 1000}
}