天天看点

QML静态值与属性绑定简述静态值属性绑定

可以为 qml 对象中的属性分配两种类型的值 - 静态值和绑定表达式,后者也称为属性绑定。

静态值:一个不依赖于其他属性的常数值。

绑定表达式:一个用于描述属性间依赖关系的 javascript 表达式。

属性绑定是 qml 的一个核心特性,允许指定不同对象属性之间的依赖关系。当属性的依赖项(属性绑定中的变量)的值发生改变时,属性将根据指定的关系自动更新。

<a href="#%e7%ae%80%e8%bf%b0">简述</a>

<a href="#%e9%9d%99%e6%80%81%e5%80%bc">静态值</a>

<a href="#%e5%b1%9e%e6%80%a7%e7%bb%91%e5%ae%9a">属性绑定</a>

<a href="#%e4%bd%bf%e7%94%a8%e5%b1%9e%e6%80%a7%e7%bb%91%e5%ae%9a">使用属性绑定</a>

<a href="#%e4%bb%8e-javascript-%e5%88%9b%e5%bb%ba%e5%b1%9e%e6%80%a7%e7%bb%91%e5%ae%9a">从 javascript 创建属性绑定</a>

<a href="#%e5%9c%a8%e5%b1%9e%e6%80%a7%e7%bb%91%e5%ae%9a%e4%b8%ad%e4%bd%bf%e7%94%a8-this">在属性绑定中使用 this</a>

所谓静态值,就是一个不依赖于其他属性的常数值。例如:<code>width : 100</code>,其中 100 就是一个静态值。

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

QML静态值与属性绑定简述静态值属性绑定

既然蓝色 rectangle 的 width 和 height 都是静态值,那么当父 rectangle 大小发生变化时,蓝色 rectangle 的大小必然不会改变。

属性绑定,简单的理解就是一个绑定表达式,用于描述属性之间的依赖关系。例如:<code>width : parent.width / 2</code>。

qml 引擎作为属性绑定的幕后推手,在时刻监视属性的依赖项,当检测到任何依赖项的值发生改变后,就会自动重新计算绑定表达式,并为属性分配新的结果。

要创建一个属性绑定,需要为属性分配一个 javascript 表达式,该表达式将计算所需的值。最简单的情况,绑定是对另一属性的引用。

下面的示例,将蓝色 rectangle 的 width 绑定到其 parent 的 width:

QML静态值与属性绑定简述静态值属性绑定

每当父 rectangle 的 width 发生变化,蓝色 rectangle 的 width 就会自动更新为相同的值。

绑定可以包含任何有效的 javascript 表达式或语句,因为 qml 使用了一个符合标准的 javascript 引擎。绑定可以访问对象属性、调用方法、并使用内置的 javascript 对象(例如:date、math)。下面是上述示例的其他可能性绑定:

在语法上,绑定允许具有任意复杂性(例如:涉及多行或命令循环)。但是,如果绑定过于复杂,可能会降低代码性能、可读性、和可维护性。比较好的方法是:重新设计具有复杂绑定的组件,或者至少将绑定转换为单独的函数。

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

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

QML静态值与属性绑定简述静态值属性绑定

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

QML静态值与属性绑定简述静态值属性绑定

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

当从 javascript 创建一个属性绑定时,this 关键字可用于引用接收绑定的对象,这有助于解决属性名称产生的歧义。

例如,下面的 component.oncompleted 处理程序在 item 的范围内定义。此范围内,width 是指 item 的 width,而不是 rectangle 的 width。要将 rectangle 的 height 绑定到其自身的 width,绑定表达式必须显式地引用 this.width(或者 rect.width):

可以看出,this 指向的是接收 qt.binding() 的返回值的对象。在这里,可以理解为 rect 表示的对象。

注意: this 的值不是在属性绑定之外定义的。

继续阅读