Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Switch control customisation
Qt 6.11 is out! See what's new in the release blog

Switch control customisation

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 522 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.
  • G Offline
    G Offline
    GrahamLa
    wrote on last edited by
    #1

    Hi
    I have customised a switch control as per the documentation (here)
    The text is displayed on the right of the switch but without customisation it is on the left.
    I need it on the left but cannot see what to do
    Any hints appreciated
    Code

       Switch {
            id: control
            x: 23
            y: 233
            text: qsTr("Switch Delegate")
    
            indicator: Rectangle {
                implicitWidth: 48
                implicitHeight: 26
                x: control.leftPadding
                y: parent.height / 2 - height / 2
                radius: 13
                color: control.checked ? "#17a81a" : "#ffffff"
                border.color: control.checked ? "#17a81a" : "#cccccc"
    
                Rectangle {
                    x: control.checked ? parent.width - width : 0
                    width: 26
                    height: 26
                    radius: 13
                    color: control.down ? "#cccccc" : "#ffffff"
                    border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"
                }
            }
            contentItem: Text {
                text: control.text
                font: control.font
                opacity: enabled ? 1.0 : 0.3
                color: control.down ? "#17a81a" : "#21be2b"
                verticalAlignment: Text.AlignVCenter
                leftPadding: control.indicator.width + control.spacing
            }
        }
    
    ODБOïO G 2 Replies Last reply
    0
    • G GrahamLa

      Hi
      I have customised a switch control as per the documentation (here)
      The text is displayed on the right of the switch but without customisation it is on the left.
      I need it on the left but cannot see what to do
      Any hints appreciated
      Code

         Switch {
              id: control
              x: 23
              y: 233
              text: qsTr("Switch Delegate")
      
              indicator: Rectangle {
                  implicitWidth: 48
                  implicitHeight: 26
                  x: control.leftPadding
                  y: parent.height / 2 - height / 2
                  radius: 13
                  color: control.checked ? "#17a81a" : "#ffffff"
                  border.color: control.checked ? "#17a81a" : "#cccccc"
      
                  Rectangle {
                      x: control.checked ? parent.width - width : 0
                      width: 26
                      height: 26
                      radius: 13
                      color: control.down ? "#cccccc" : "#ffffff"
                      border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"
                  }
              }
              contentItem: Text {
                  text: control.text
                  font: control.font
                  opacity: enabled ? 1.0 : 0.3
                  color: control.down ? "#17a81a" : "#21be2b"
                  verticalAlignment: Text.AlignVCenter
                  leftPadding: control.indicator.width + control.spacing
              }
          }
      
      ODБOïO Offline
      ODБOïO Offline
      ODБOï
      wrote on last edited by
      #2

      @GrahamLa hi,
      add this to the text

      anchors.right: parent.left
      
      1 Reply Last reply
      1
      • G GrahamLa

        Hi
        I have customised a switch control as per the documentation (here)
        The text is displayed on the right of the switch but without customisation it is on the left.
        I need it on the left but cannot see what to do
        Any hints appreciated
        Code

           Switch {
                id: control
                x: 23
                y: 233
                text: qsTr("Switch Delegate")
        
                indicator: Rectangle {
                    implicitWidth: 48
                    implicitHeight: 26
                    x: control.leftPadding
                    y: parent.height / 2 - height / 2
                    radius: 13
                    color: control.checked ? "#17a81a" : "#ffffff"
                    border.color: control.checked ? "#17a81a" : "#cccccc"
        
                    Rectangle {
                        x: control.checked ? parent.width - width : 0
                        width: 26
                        height: 26
                        radius: 13
                        color: control.down ? "#cccccc" : "#ffffff"
                        border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"
                    }
                }
                contentItem: Text {
                    text: control.text
                    font: control.font
                    opacity: enabled ? 1.0 : 0.3
                    color: control.down ? "#17a81a" : "#21be2b"
                    verticalAlignment: Text.AlignVCenter
                    leftPadding: control.indicator.width + control.spacing
                }
            }
        
        G Offline
        G Offline
        GrahamLa
        wrote on last edited by
        #3

        @GrahamLa
        Thanks that did it. I got alot to learn!

        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