import QtQuick 2.9 import QtQuick.Controls 2.3 SwitchDelegate { id: control implicitHeight: 50 implicitWidth: 100 baselineOffset: 100 contentItem: Text { visible: false } Text { anchors { verticalCenter: parent.verticalCenter left: parent.left right: indicator.left leftMargin: control.width * 0.02 rightMargin: control.width * 0.01 } text: control.text color: appTheme.style.textColor fontSizeMode: Text.Fit font.pixelSize: control.height * 0.4 } indicator: Rectangle { property bool checked: parent.checked property bool down: parent.down height: parent.height * 0.6 width: height * 1.84 anchors { verticalCenter: parent.verticalCenter right: parent.right rightMargin: control.width * 0.02 } radius: height * 0.5 color: parent.checked ? "#17a81a" : "transparent" border.color: parent.checked ? "#17a81a" : "#cccccc" Behavior on color{ ColorAnimation{ duration: 200 } } Rectangle { x: parent.checked ? parent.width - width : 0 width: parent.height height: parent.height radius: height * 0.5 color: parent.down ? "#cccccc" : "#ffffff" border.color: parent.checked ? (parent.down ? "#17a81a" : "#21be2b") : "#999999" Behavior on x{ NumberAnimation { property: "x" duration: 200 easing.type: Easing.InOutQuad } } } } background: Rectangle { opacity: enabled ? 1 : 0.3 color: control.down ? appTheme.style.delegatePressedColor : appTheme.style.delegateBackgroundColor radius: height * 0.3 Behavior on color { ColorAnimation { duration: 200 } } } }