qml属性绑定问题
最近项目中遇到qml属性绑定相关的两个问题:
- 改变object对象的属性,qml绑定的相关属性没有改变
- 改变绑定属性,导致绑定关系被打断
上面两个问题说的有点不清楚,接下来看代码详解
Window {
id:mainWnd
visible: true
width: 640
height: 480
title: qsTr("Hello World")
property var robotInfo:{"name":"robot1","light_state":1}
property bool lightOn: robotInfo.light_state === 1
Row{
anchors.centerIn: parent
spacing: 10
Text {
text: lightOn?qsTr("灯光已经打开"):qsTr("灯光已经关闭")
}
Button{
text: qsTr("开关")
onClicked: {
robotInfo.light_state === 1 ?robotInfo.light_state = 0:robotInfo.light_state = 1
console.log("robotInfo.light_state :",robotInfo.light_state)
}
}
}
}
问题一:
1.属性对象robotinfo是一个json 对象
2.lightOn属性绑定了robotinfo 的字段属性light_state值
3.onClicked事件中改变light_state的值,但是lightOn没有跟着改变
原因:这是因为robotinfo对象本身没有变,只是其中的某个属性改变,属性绑定不会重新评估。只有外层的整个object改变时才会重新评估。
既然知道了原因,我想到的解决方法就是,每改变一个属性,都改变object。保证所有相关的属性绑定都重新评估。其实也就是重新赋值的过程。
function update(){
var obj = {};
Object.assign(obj,robotInfo)
robotInfo = obj
}
Button{
text: qsTr("开关")
onClicked: {
robotInfo.light_state === 1 ?robotInfo.light_state = 0:robotInfo.light_state = 1
console.log("robotInfo.light_state :",robotInfo.light_state)
mainWnd.update()
}
}
问题二:
1.认为改变lightOn的值
2.再改变robotInfo.light_state,lightOn再也无法跟着变化
先点击开关2,再点击开关按钮,无论robotInfo.light_state怎么变,lightOn都没变化了。
代码如下:
Window {
id:mainWnd
visible: true
width: 640
height: 480
title: qsTr("Hello World")
property var robotInfo:{"name":"robot1","light_state":1}
property bool lightOn: robotInfo.light_state === 1
Row{
anchors.centerIn: parent
spacing: 10
Text {
text: lightOn?qsTr("灯光已经打开"):qsTr("灯光已经关闭")
}
Button{
text: qsTr("开关")
onClicked: {
robotInfo.light_state === 1 ?robotInfo.light_state = 0:robotInfo.light_state = 1
console.log("robotInfo.light_state :",robotInfo.light_state)
mainWnd.update()
}
}
Button{
text: qsTr("开关2")
onClicked: {
lightOn = !lightOn
}
}
}
function update(){
var obj = {};
Object.assign(obj,robotInfo)
robotInfo = obj
}
}
原因:认为改变属性lightOn的值之后,会打断属性绑定,即再改变robotInfo.light_state,也无法体现绑定关系了。
解决方法:只能用第一个问题的解决方案,既然做了属性绑定,就不要自行改变属性的值,而是通过改变相关绑定的属性。一如本例,只能通过直接改变robotInfo.light_state。