Awesome Flat QML UI

 

The switch button that can be turned on or off is modified using the Switch control of Qml.

Switch button code

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

Switch style Use code

GridLayout {
    width: root.width
    rows: switchRepeater.count

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

            Switch {
                checkedColor: modelData
            }

            Switch {
                checkedColor: modelData
                checked: true
            }
        }
    }
}