From 1515e39a5150c936bce34b135122b204e44518f2 Mon Sep 17 00:00:00 2001 From: Reve4Mevol <2664806516@qq.com> Date: Sat, 22 Mar 2025 17:44:37 +0800 Subject: [PATCH 1/2] fix : complete ESwitch code, add some ETheme colors --- Editor/Qml/ESwitch.qml | 119 ++++++++++++++++++++++++++++++++++ Editor/Qml/ETheme.qml | 2 + Editor/Qml/EWidgetSamples.qml | 39 +++++++++++ 3 files changed, 160 insertions(+) create mode 100644 Editor/Qml/ESwitch.qml diff --git a/Editor/Qml/ESwitch.qml b/Editor/Qml/ESwitch.qml new file mode 100644 index 000000000..67fd5e3e2 --- /dev/null +++ b/Editor/Qml/ESwitch.qml @@ -0,0 +1,119 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic +import QtQuick.Layouts + + +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.inputBoxColor; + } + + implicitWidth: 40 + 2 * (root.size - 1) + implicitHeight: 24 + 2 * (root.size - 1) + x: parent.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 + } + } +} diff --git a/Editor/Qml/ETheme.qml b/Editor/Qml/ETheme.qml index 5671e8b41..e95a4a011 100644 --- a/Editor/Qml/ETheme.qml +++ b/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 inputBoxColor: Qt.color('#c0c0c0') + 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') } diff --git a/Editor/Qml/EWidgetSamples.qml b/Editor/Qml/EWidgetSamples.qml index 9baf9057b..6928c69f8 100644 --- a/Editor/Qml/EWidgetSamples.qml +++ b/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 + } + } } } } From dd7bf374130b506a853da29f6030b0d0b5568ed5 Mon Sep 17 00:00:00 2001 From: Reve4Mevol <2664806516@qq.com> Date: Sat, 22 Mar 2025 19:01:32 +0800 Subject: [PATCH 2/2] fix: Mod Etheme colors,fix qmllint problem. --- Editor/Qml/ESwitch.qml | 9 ++++----- Editor/Qml/ETheme.qml | 2 +- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/Editor/Qml/ESwitch.qml b/Editor/Qml/ESwitch.qml index 67fd5e3e2..b40b65a37 100644 --- a/Editor/Qml/ESwitch.qml +++ b/Editor/Qml/ESwitch.qml @@ -1,7 +1,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import QtQuick.Layouts Item { @@ -26,12 +25,12 @@ Item { signal clicked() - id: 'root' + id: root implicitWidth: switchWidget.implicitWidth implicitHeight: switchWidget.implicitHeight Switch { - id: 'switchWidget' + id: switchWidget enabled: !root.disabled checked: root.checked onClicked: root.clicked() @@ -41,12 +40,12 @@ Item { if (disabled) { return checked ? ETheme.disabledCheckedColor : ETheme.disabledColor; } - return checked ? ETheme.primaryColor : ETheme.inputBoxColor; + return checked ? ETheme.primaryColor : ETheme.secondaryBgColor; } implicitWidth: 40 + 2 * (root.size - 1) implicitHeight: 24 + 2 * (root.size - 1) - x: parent.leftPadding + x: switchWidget.leftPadding anchors.verticalCenter: parent.verticalCenter radius: width / 2 color: getBackgroundColor(switchWidget.checked, root.disabled) diff --git a/Editor/Qml/ETheme.qml b/Editor/Qml/ETheme.qml index e95a4a011..bf845b3a1 100644 --- a/Editor/Qml/ETheme.qml +++ b/Editor/Qml/ETheme.qml @@ -13,7 +13,7 @@ QtObject { property color disabledColor: Qt.color('#676563') property color fontColor: Qt.color('#ecf0f1') property color linkFontColor: Qt.color('#91b9c4') - property color inputBoxColor: Qt.color('#c0c0c0') + property color secondaryBgColor: Qt.color('#8e8e8e') property color disabledCheckedColor: Qt.color('#c9a9a6') property FontLoader normalFont: FontLoader { source: Qt.url('Resource/Font/MiSans-Normal.ttf') }