Qml bindings seems to be broken for custom control

Andreas Schacherbauer

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;
                }
            }
        }
    }
}

Markkyboy

This post is deleted!