How to change Switch style in QML

[Mikeeeeee]

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
            }
        }
    }

[Shrinidhi Upadhyaya]

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:-

[Mikeeeeee]

This post is deleted!