How to change Switch style in QML



  • Hi!
    How to change Switch style in QML?
    It's not work:

    import QtQuick 2.12
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Controls 2.12
    import AppCore 1.0
     
     
        Switch {
            id: element
            x: 248
            y: 39
            text: qsTr("Switch")
            focusPolicy: Qt.WheelFocus
            style: SwitchStyle {
                groove: Rectangle {
                        implicitWidth: 100
                        implicitHeight: 20
                        radius: 9
                        border.color: control.activeFocus ? "darkblue" : "gray"
                        border.width: 1
                }
            }
        }
    


  • Hi @Mikeeeeee , you can make use of the properties like background, indicator etc and customize or change the style of your switch.
    For more information you can go through the documentation[https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-switch]

    Sample Code:-

     Switch {
            id: control
            checked: true
    
            indicator: Rectangle {
                implicitWidth: 48
                implicitHeight: 26
                x: control.width - width - control.rightPadding
                y: parent.height / 2 - height / 2
                radius: 13
                color: control.checked ? "green" : "red"
                border.color: "black"
    
                Rectangle {
                    x: control.checked ? parent.width - width : 0
                    width: 26
                    height: 26
                    radius: 13
                    border.color: "black"
                }
            }
        }
    

    Sample Output:-

    0_1567994770210_31408df6-0cbd-43b5-948e-0ed969ff09fd-image.png



  • This post is deleted!

Log in to reply