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
Forum Updated to NodeBB v4.3 + New Features

Switch control customisation

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 497 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