Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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!

Log in to reply