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 661 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 28 Mar 2021, 18:42 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
                                }
    
    O 1 Reply Last reply 28 Mar 2021, 20:03
    0
    • A Offline
      A Offline
      ACaldas
      wrote on 28 Mar 2021, 19:52 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
        28 Mar 2021, 18:42

        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
                                    }
        
        O Offline
        O Offline
        ODБOï
        wrote on 28 Mar 2021, 20:03 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 28 Mar 2021, 20:06
        1
        • O ODБOï
          28 Mar 2021, 20:03

          @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 28 Mar 2021, 20:06 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 28 Mar 2021, 20:23 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 28 Mar 2021, 21:25 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

              2/6

              28 Mar 2021, 19:52

              topic:navigator.unread, 4
              • Login

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