Flat style Qml switch button || Custom Switch in QML Design

Adesh singh..
December 12, 2022

 DashSwitch.qml 





import QtQuick 2.0
import QtQuick.Controls 2.0

Switch {
    id: root
    property color checkedColor: "#0ACF97"

    indicator: Rectangle {
        width: 54
        height: 34
        radius: height / 2
        color: root.checked ? checkedColor : "white"
        border.width: 2
        border.color: root.checked ? checkedColor : "#E5E5E5"

        Rectangle {
            x: root.checked ? parent.width - width - 2 : 1
            width: root.checked ? parent.height - 4 : parent.height - 2
            height: width
            radius: width / 2
            anchors.verticalCenter: parent.verticalCenter
            color: "white"
            border.color: "#D5D5D5"

            Behavior on x {
                NumberAnimation { duration: 200 }
            }
        }
    }
}



Main.qml

 

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.3
Window {
    id:root
    width: 640
    height: 480
    visible: true
    title: qsTr("QML FLAT Style Custom Switch")
    GridLayout {
        width: root.width
        rows: switchRepeater.count

        Repeater {
            id: switchRepeater
            model: ["#727CF5", "#0ACF97", "#F9375E", "#FFBC00", "#2B99B9"]
            Column {
                spacing: 15
                DashSwitch {
                    checkedColor: modelData
                    checked: true
                }

                DashSwitch {
                    checkedColor: modelData
                }

                DashSwitch {
                    checkedColor: modelData
                    checked: true
                }
            }
        }
    }

}