网站主域名,休闲小零食网站开发方案,微信小程序网站建设方案,静态网站如何做优化QML- 属性绑定一、概述二、 QML绑定使用三、从JavaScript创建属性绑定1. 调试绑定的覆盖2. 属性绑定使用 this一、概述
QML对象的属性可以被赋一个静态值#xff0c;该值保持不变#xff0c;直到显式地赋一个新值。但是#xff0c;为了充分利用QML及其对动态对象行为的内置…
QML- 属性绑定一、概述二、 QML绑定使用三、从JavaScript创建属性绑定1. 调试绑定的覆盖2. 属性绑定使用 this一、概述
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: yellowTextInput {id: myTextInputtext: Hello QML!}}Rectangle {id: bottomRectwidth: 100height: 50color: myTextInput.text.length 10 ? red : blue}
}在前面的例子中
topRect width 依赖于 bottomRectWidth和column.widthtopRect 高度取决于column.heightbottomRect 颜色取决于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.infotrue));有关启用日志类别输出的更多信息请参阅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}
}
