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

(QML syntax - Basics) How to implement an on-off interaction on a switch



  • Gents, sorry for the very newbie's question.
    I have a custom switch "ca" that I'm trying to interact with another "cb" into a main.qml. The "ca" switch instance should enable (e.g. onToggled - in "on" position) "cb" and disable it in off position. I'm ok doing the first behavior but no idea on how to make the "cb" switch turn back to their initial state via the master "ca" switch. Could anyone help me please? Thanks.

    My custom switch "ca" inside the main.qml goes like this

                     CustomSC {
                                    ...
                                    onToggled: cb.enabled = false
                                }
    


  • "ca" onToggled (mode on):
    1869e14e-322c-4490-90b1-d66674d3e8ea-image.png

    "ca" (mode off): the switch "cb" stays as is...
    c5f22ff0-40a0-47b5-a249-bcb2f569f83b-image.png



  • @ACaldas said in (QML syntax - Basics) How to implement an on-off interaction on a switch:

    onToggled: cb.enabled = false

    where do you set "enabled" back to true ?



  • @LeLev I didn't. No idea on how to do.



  • This is my CustomSC.qml

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    
    SwitchDelegate {
        id: sDeleg
        text: qsTr("SwitchDelegate")
        spacing: 10
        rightPadding: 2
        leftPadding: 2
        bottomPadding: 0
        topPadding: 0
        checked: false
    
            contentItem: Text {
            text: sDeleg.text
            font: sDeleg.font
            opacity: enabled ? 1.0 : 0.3
            color: sDeleg.down ? "#21be2b" : "#a9a9a9"
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
            leftPadding: 0
            rightPadding: 38
        }
    
        indicator: Rectangle {
            implicitWidth: 34
            implicitHeight: 16
            x: sDeleg.width - width - sDeleg.rightPadding
            y: parent.height / 2 - height / 2
            radius: 8
            color: sDeleg.checked ? "#17a81a" : "transparent"
            border.color: sDeleg.checked ? "#17a81a" : "#cccccc"
    
            Rectangle {
                x: sDeleg.checked ? parent.width - width : 0
                width: 16
                height: 16
                radius: 8
                color: sDeleg.down ? "#cccccc" : "#ffffff"
                border.color: sDeleg.checked ? (sDeleg.down ? "#17a81a" : "#21be2b") : "#999999"
            }
        }
    
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 30
            visible: sDeleg.down || sDeleg.highlighted
            color: sDeleg.down ? "#00000000" : "#00000000"
        }
    }
    


  • Thanks @LeLev for the great support.

    4594aa2a-9aef-437f-88cd-05ead9ed03cf-image.png

    If you guys could please direct me for basics stuffs related to syntax, I would appreciate. As a pre-requisite I really need to understand how the things work before putting the hands on it.