Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. (QML syntax - Basics) How to implement an on-off interaction on a switch

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

Scheduled Pinned Locked Moved Solved General and Desktop
switchtoggleenablingdisabli
6 Posts 2 Posters 665 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    ACaldas
    wrote on last edited by ACaldas
    #1

    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
                                }
    
    ODБOïO 1 Reply Last reply
    0
    • A Offline
      A Offline
      ACaldas
      wrote on last edited by ACaldas
      #2

      "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

      1 Reply Last reply
      0
      • A ACaldas

        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
                                    }
        
        ODБOïO Offline
        ODБOïO Offline
        ODБOï
        wrote on last edited by
        #3

        @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 ?

        A 1 Reply Last reply
        1
        • ODБOïO ODБOï

          @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 ?

          A Offline
          A Offline
          ACaldas
          wrote on last edited by
          #4

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

          1 Reply Last reply
          0
          • A Offline
            A Offline
            ACaldas
            wrote on last edited by
            #5

            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"
                }
            }
            
            1 Reply Last reply
            0
            • A Offline
              A Offline
              ACaldas
              wrote on last edited by
              #6

              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.

              1 Reply Last reply
              0

              • Login

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved