Merge pull request #387 from Reve4Mevol/master

Feat: Add ESwitch

Author: FlyAndNotDown

Editor/Qml/ESwitch.qml

@@ -0,0 +1,118 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+
+
+Item {
+
+    enum Size {
+        Small,
+        Middle,
+        Large
+    }
+
+    enum Filler {
+        None,
+        Withchar
+    }
+
+    property string text: ''
+    property string icon: ''
+    property bool disabled: false
+    property bool checked: false
+    property int size: ESwitch.Size.Middle
+    property int filler: ESwitch.Filler.None
+
+    signal clicked()
+
+    id: root
+    implicitWidth: switchWidget.implicitWidth
+    implicitHeight: switchWidget.implicitHeight
+
+    Switch {
+        id: switchWidget
+        enabled: !root.disabled
+        checked: root.checked
+        onClicked: root.clicked()
+        width: root.width
+        indicator: Rectangle {
+            function getBackgroundColor(checked, disabled) {
+                if (disabled) {
+                    return checked ? ETheme.disabledCheckedColor : ETheme.disabledColor;
+                }
+                return checked ? ETheme.primaryColor : ETheme.secondaryBgColor;
+            }
+
+            implicitWidth: 40 + 2 * (root.size - 1)
+            implicitHeight: 24 + 2 * (root.size - 1)
+            x: switchWidget.leftPadding
+            anchors.verticalCenter: parent.verticalCenter
+            radius: width / 2
+            color: getBackgroundColor(switchWidget.checked, root.disabled)
+
+            Rectangle {
+                function getX(check, down) {
+                    if (check && down)
+                        return parent.width - 2 * radius - 8;
+                    else
+                        return check ? parent.width - width - 2 : 2
+
+                }
+
+                id: handle
+                x: getX(switchWidget.checked, switchWidget.down)
+                anchors.verticalCenter: parent.verticalCenter
+                radius: switchWidget.checked ? 9 + root.size : 7 + root.size
+                height: 2 * radius
+                width: switchWidget.down ? 2 * radius + 6 : 2 * radius
+                color: ETheme.fontColor;
+
+                Behavior on width {
+                    NumberAnimation {
+                        duration: 100
+                    }
+                }
+                Behavior on x {
+                    NumberAnimation {
+                        duration: 100
+                        easing.type: easing.InOutCubic
+                    }
+                }
+            }
+
+            Text {
+                function getChar(filler, checked, down) {
+                    if (filler == ESwitch.Filler.None || down) {
+                        return '';
+                    } else {
+                        return checked ? "开" : "关";
+                    }
+                }
+
+                id: switchText
+                font.pixelSize: ETheme.contentFontSize
+                font.family: ETheme.fontFamily
+                color: ETheme.fontColor
+                x: switchWidget.checked ? (parent.width - handle.radius * 2 - font.pixelSize - 2) / 2 : (parent.width + handle.radius * 2 - font.pixelSize + 2) / 2;
+                anchors.verticalCenter: parent.verticalCenter
+                text: getChar(root.filler, switchWidget.checked, switchWidget.down)
+                Behavior on x {
+                    NumberAnimation {
+                        duration: 100
+                        easing.type: easing.OutExpo
+                    }
+                }
+            }
+        }
+
+
+        contentItem: Text {
+            text: root.text
+            font.pixelSize: ETheme.contentFontSize
+            font.family: ETheme.fontFamily
+            color: ETheme.fontColor
+            verticalAlignment: Text.AlignVCenter
+            leftPadding: switchWidget.indicator.width + 5
+        }
+    }
+}

Editor/Qml/ETheme.qml

@@ -13,6 +13,8 @@ QtObject {
     property color disabledColor: Qt.color('#676563')
     property color fontColor: Qt.color('#ecf0f1')
     property color linkFontColor: Qt.color('#91b9c4')
+    property color secondaryBgColor: Qt.color('#8e8e8e')
+    property color disabledCheckedColor: Qt.color('#c9a9a6')
 
     property FontLoader normalFont: FontLoader { source: Qt.url('Resource/Font/MiSans-Normal.ttf') }
     property FontLoader boldFont: FontLoader { source: Qt.url('Resource/Font/MiSans-Bold.ttf') }

Editor/Qml/EWidgetSamples.qml

@@ -272,6 +272,45 @@ Rectangle {
                 EIcon { name: 'folder' }
                 EIcon { name: 'folder-import' }
             }
+
+            RowLayout {
+                Layout.leftMargin: 5
+                Layout.topMargin: 15
+                EText {
+                    text: 'Switches'
+                    style: EText.Style.Title1
+                }
+            }
+            RowLayout {
+                ESwitch {
+                    text: 'Small Switch'
+                    size: ESwitch.Size.Small
+                }
+                ESwitch {
+                    text: 'Middle Switch'
+                    size: ESwitch.Size.Middle
+                }
+                ESwitch {
+                    text: 'Large Switch'
+                    size: ESwitch.Size.Large
+                }
+            }
+            RowLayout {
+                ESwitch {
+                    text: 'Disabled Checked'
+                    disabled: true
+                    checked: true
+                }
+                ESwitch {
+                    text: 'Disabled Unchecked'
+                    disabled: true
+                    checked: false
+                }
+                ESwitch {
+                    text: 'Filled Symbol'
+                    filler: ESwitch.Filler.Withchar
+                }
+            }
         }
     }
 }