Unsolved Qml bindings seems to be broken for custom control
-
Hi, I wanted to rebuild a Qml Switch like control with the same idea of a "checked" state. So I added internally a bool property and when using the control, I bin the checked property to a model value and the onCheckedChange callback to update my model data. So far so good.
When I try to combine two of these controls together, meaning that both refer to the same model data and both update the model in there changed callbacks, The bindings get broken after I used control B for the first time.
The interesting part is that if I use two Qml Switch controls for the same idea, it works. So something seems to be wrong with my implementation or the Qml Switch does some magic in the background which I didn't saw (I had a look at this Qml Switch implementation here https://github.com/RSATom/Qt/blob/master/qtquickcontrols/src/controls/Switch.qml)I attached a demo Qml project where you could try it out and play around with it. The two Qml Switches at the top are connected with each othere and work as expected. The Switch below the devider in combination with the custom control, represented through the rectangle, does not work in the same way but should from my point of view.
Maybe someone knows why the bindings get broken for my custom control but not for the combination of two Qml Switches.
import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.12 Window { id: rootItem visible: true width: 640 height: 480 title: qsTr("Switcher") property bool switchABValue: false property bool customSwitchIssueValue: false Column { spacing: 10 Switch { id: switchA checked: rootItem.switchABValue onCheckedChanged: { rootItem.switchABValue = switchA.checked } } Switch { id: switchB checked: rootItem.switchABValue onCheckedChanged: { rootItem.switchABValue = switchB.checked } } Rectangle { id: spacer width: parent.width height: 1 color: "gray" } Switch { id: switchX checked: rootItem.customSwitchIssueValue onCheckedChanged: { rootItem.customSwitchIssueValue = switchX.checked } } Rectangle { id: customControl width: 75 height: 50 color: customControl.checked ? "lawngreen" : "steelblue" property bool checked: rootItem.customSwitchIssueValue onCheckedChanged: { rootItem.customSwitchIssueValue = customControl.checked } MouseArea { anchors.fill: parent onClicked: { customControl.checked = !customControl.checked; } } } } }
-
This post is deleted!