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。