From 56a62f0b29417ec1a3800cab864f98941a483d12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E5=AD=90=E6=A5=9A=5Czhuzi?= Date: Sun, 27 Aug 2023 12:40:02 +0800 Subject: [PATCH] fix #264 --- example/qml-Qt6/component/CodeExpander.qml | 3 +- example/qml-Qt6/page/T_Slider.qml | 37 ++++-- example/qml/component/CodeExpander.qml | 3 +- example/qml/page/T_Slider.qml | 38 ++++-- example/src/main.cpp | 2 +- .../FluentUI/Controls/FluRangeSlider.qml | 120 ++++++++++++++++++ .../FluentUI/Controls/FluStatusView.qml | 1 + src/Qt5/imports/FluentUI/qmldir | 1 + .../FluentUI/Controls/FluRangeSlider.qml | 120 ++++++++++++++++++ src/resource.qrc | 1 + 10 files changed, 295 insertions(+), 31 deletions(-) create mode 100644 src/Qt5/imports/FluentUI/Controls/FluRangeSlider.qml create mode 100644 src/Qt6/imports/FluentUI/Controls/FluRangeSlider.qml diff --git a/example/qml-Qt6/component/CodeExpander.qml b/example/qml-Qt6/component/CodeExpander.qml index f69c879a..7387033f 100644 --- a/example/qml-Qt6/component/CodeExpander.qml +++ b/example/qml-Qt6/component/CodeExpander.qml @@ -136,7 +136,8 @@ FluExpander{ "FluTour", "FluQRCode", "FluTimeline", - "FluChart" + "FluChart", + "FluRangeSlider" ]; code = code.replace(/\n/g, "
"); code = code.replace(/ /g, " "); diff --git a/example/qml-Qt6/page/T_Slider.qml b/example/qml-Qt6/page/T_Slider.qml index 517904a6..98f89965 100644 --- a/example/qml-Qt6/page/T_Slider.qml +++ b/example/qml-Qt6/page/T_Slider.qml @@ -11,11 +11,18 @@ FluScrollablePage{ FluArea{ Layout.fillWidth: true - height: 100 - paddings: 10 + Layout.preferredHeight: 200 Layout.topMargin: 20 - FluSlider{ - anchors.verticalCenter: parent.verticalCenter + paddings: 10 + + Row{ + spacing: 30 + FluSlider{ + } + FluSlider{ + orientation: Qt.Vertical + anchors.verticalCenter: parent.verticalCenter + } } } CodeExpander{ @@ -26,25 +33,27 @@ FluScrollablePage{ }' } + FluArea{ Layout.fillWidth: true - height: 200 - paddings: 10 + Layout.preferredHeight: 200 Layout.topMargin: 20 - FluSlider{ - orientation: Qt.Vertical - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter + paddings: 10 + Row{ + spacing: 30 + FluRangeSlider{ + } + FluRangeSlider{ + orientation: Qt.Vertical + anchors.verticalCenter: parent.verticalCenter + } } } CodeExpander{ Layout.fillWidth: true Layout.topMargin: -1 - code:'FluSlider{ + code:'FluRangeSlider{ orientation: Qt.Vertical - value:50 }' } - - } diff --git a/example/qml/component/CodeExpander.qml b/example/qml/component/CodeExpander.qml index 5570c48b..cc547cec 100644 --- a/example/qml/component/CodeExpander.qml +++ b/example/qml/component/CodeExpander.qml @@ -136,7 +136,8 @@ FluExpander{ "FluTour", "FluQRCode", "FluTimeline", - "FluChart" + "FluChart", + "FluRangeSlider" ]; code = code.replace(/\n/g, "
"); code = code.replace(/ /g, " "); diff --git a/example/qml/page/T_Slider.qml b/example/qml/page/T_Slider.qml index 7d0c64b7..f46465ea 100644 --- a/example/qml/page/T_Slider.qml +++ b/example/qml/page/T_Slider.qml @@ -12,11 +12,18 @@ FluScrollablePage{ FluArea{ Layout.fillWidth: true - height: 100 - paddings: 10 + Layout.preferredHeight: 200 Layout.topMargin: 20 - FluSlider{ - anchors.verticalCenter: parent.verticalCenter + paddings: 10 + + Row{ + spacing: 30 + FluSlider{ + } + FluSlider{ + orientation: Qt.Vertical + anchors.verticalCenter: parent.verticalCenter + } } } CodeExpander{ @@ -27,25 +34,28 @@ FluScrollablePage{ }' } + FluArea{ Layout.fillWidth: true - height: 200 - paddings: 10 + Layout.preferredHeight: 200 Layout.topMargin: 20 - FluSlider{ - orientation: Qt.Vertical - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter + paddings: 10 + Row{ + spacing: 30 + FluRangeSlider{ + } + FluRangeSlider{ + orientation: Qt.Vertical + anchors.verticalCenter: parent.verticalCenter + } } } CodeExpander{ Layout.fillWidth: true Layout.topMargin: -1 - code:'FluSlider{ + code:'FluRangeSlider{ orientation: Qt.Vertical - value:50 }' } - - } + diff --git a/example/src/main.cpp b/example/src/main.cpp index 9b20b8fc..d5df129e 100644 --- a/example/src/main.cpp +++ b/example/src/main.cpp @@ -36,7 +36,7 @@ int main(int argc, char *argv[]) FramelessConfig::instance()->set(Global::Option::EnableBlurBehindWindow); #ifdef Q_OS_WIN // 此设置仅在Windows下生效 FramelessConfig::instance()->set(Global::Option::ForceHideWindowFrameBorder); - FramelessConfig::instance()->set(Global::Option::EnableBlurBehindWindow,true); + FramelessConfig::instance()->set(Global::Option::EnableBlurBehindWindow,false); #endif #ifdef Q_OS_MACOS FramelessConfig::instance()->set(Global::Option::ForceNonNativeBackgroundBlur,false); diff --git a/src/Qt5/imports/FluentUI/Controls/FluRangeSlider.qml b/src/Qt5/imports/FluentUI/Controls/FluRangeSlider.qml new file mode 100644 index 00000000..a7257ad7 --- /dev/null +++ b/src/Qt5/imports/FluentUI/Controls/FluRangeSlider.qml @@ -0,0 +1,120 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Templates 2.15 as T +import FluentUI 1.0 + +T.RangeSlider { + id: control + property bool tooltipEnabled: true + property bool isTipInt: true + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + first.implicitHandleWidth + leftPadding + rightPadding, + second.implicitHandleWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + first.implicitHandleHeight + topPadding + bottomPadding, + second.implicitHandleHeight + topPadding + bottomPadding) + padding: 6 + first.value: 0 + second.value: 100 + stepSize: 1 + from: 0 + to:100 + snapMode: RangeSlider.SnapAlways + first.handle: Rectangle { + x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2) + y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height)) + implicitWidth: 24 + implicitHeight: 24 + radius: width / 2 + color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1) + FluShadow{ + radius: 12 + } + Rectangle{ + width: 24 + height: 24 + radius: 12 + color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark + anchors.centerIn: parent + scale: { + if(control.first.pressed){ + return 4/10 + } + return control.first.hovered ? 6/10 : 5/10 + } + Behavior on scale { + enabled: FluTheme.enableAnimation + NumberAnimation{ + duration: 167 + easing.type: Easing.OutCubic + } + } + } + } + + second.handle: Rectangle { + x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2) + y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height)) + implicitWidth: 24 + implicitHeight: 24 + radius: width / 2 + color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1) + FluShadow{ + radius: 12 + } + Rectangle{ + width: 24 + height: 24 + radius: 12 + color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark + anchors.centerIn: parent + scale: { + if(control.second.pressed){ + return 4/10 + } + return control.second.hovered ? 6/10 : 5/10 + } + Behavior on scale { + enabled: FluTheme.enableAnimation + NumberAnimation{ + duration: 167 + easing.type: Easing.OutCubic + } + } + } + } + + background: Item { + x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2) + y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0) + implicitWidth: control.horizontal ? 180 : 6 + implicitHeight: control.horizontal ? 6 : 180 + width: control.horizontal ? control.availableWidth : implicitWidth + height: control.horizontal ? implicitHeight : control.availableHeight + scale: control.horizontal && control.mirrored ? -1 : 1 + Rectangle{ + anchors.fill: parent + anchors.margins: 1 + radius: 2 + color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1) + } + Rectangle { + x: control.horizontal ? control.first.position * parent.width + 3 : 0 + y: control.horizontal ? 0 : control.second.visualPosition * parent.height + 3 + width: control.horizontal ? control.second.position * parent.width - control.first.position * parent.width - 6 : 6 + height: control.horizontal ? 6 : control.second.position * parent.height - control.first.position * parent.height - 6 + color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark + } + } + FluTooltip{ + parent: control.first.handle + visible: control.tooltipEnabled && (control.first.pressed || control.first.hovered) + text:String(isTipInt?Math.round(control.first.value):control.first.value) + } + FluTooltip{ + parent: control.second.handle + visible: control.tooltipEnabled && (control.second.pressed || control.second.hovered) + text:String(isTipInt?Math.round(control.second.value):control.second.value) + } +} + diff --git a/src/Qt5/imports/FluentUI/Controls/FluStatusView.qml b/src/Qt5/imports/FluentUI/Controls/FluStatusView.qml index 6fac6d3d..1b6d9c99 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluStatusView.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluStatusView.qml @@ -1,4 +1,5 @@ import QtQuick 2.15 +import QtQuick.Window 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import FluentUI 1.0 diff --git a/src/Qt5/imports/FluentUI/qmldir b/src/Qt5/imports/FluentUI/qmldir index ce2081b6..49175a4f 100644 --- a/src/Qt5/imports/FluentUI/qmldir +++ b/src/Qt5/imports/FluentUI/qmldir @@ -92,4 +92,5 @@ FluTooltip 1.0 Controls/FluTooltip.qml FluTour 1.0 Controls/FluTour.qml FluTreeView 1.0 Controls/FluTreeView.qml FluWindow 1.0 Controls/FluWindow.qml +FluRangeSlider 1.0 Controls/FluRangeSlider.qml plugin fluentuiplugin diff --git a/src/Qt6/imports/FluentUI/Controls/FluRangeSlider.qml b/src/Qt6/imports/FluentUI/Controls/FluRangeSlider.qml new file mode 100644 index 00000000..9e575610 --- /dev/null +++ b/src/Qt6/imports/FluentUI/Controls/FluRangeSlider.qml @@ -0,0 +1,120 @@ +import QtQuick +import QtQuick.Controls.Basic +import QtQuick.Controls.impl +import QtQuick.Templates as T +import FluentUI + +T.RangeSlider { + id: control + property bool tooltipEnabled: true + property bool isTipInt: true + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + first.implicitHandleWidth + leftPadding + rightPadding, + second.implicitHandleWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + first.implicitHandleHeight + topPadding + bottomPadding, + second.implicitHandleHeight + topPadding + bottomPadding) + padding: 6 + first.value: 0 + second.value: 100 + stepSize: 1 + from: 0 + to:100 + snapMode: RangeSlider.SnapAlways + first.handle: Rectangle { + x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2) + y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height)) + implicitWidth: 24 + implicitHeight: 24 + radius: width / 2 + color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1) + FluShadow{ + radius: 12 + } + Rectangle{ + width: 24 + height: 24 + radius: 12 + color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark + anchors.centerIn: parent + scale: { + if(control.first.pressed){ + return 4/10 + } + return control.first.hovered ? 6/10 : 5/10 + } + Behavior on scale { + enabled: FluTheme.enableAnimation + NumberAnimation{ + duration: 167 + easing.type: Easing.OutCubic + } + } + } + } + + second.handle: Rectangle { + x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2) + y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height)) + implicitWidth: 24 + implicitHeight: 24 + radius: width / 2 + color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1) + FluShadow{ + radius: 12 + } + Rectangle{ + width: 24 + height: 24 + radius: 12 + color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark + anchors.centerIn: parent + scale: { + if(control.second.pressed){ + return 4/10 + } + return control.second.hovered ? 6/10 : 5/10 + } + Behavior on scale { + enabled: FluTheme.enableAnimation + NumberAnimation{ + duration: 167 + easing.type: Easing.OutCubic + } + } + } + } + + background: Item { + x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2) + y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0) + implicitWidth: control.horizontal ? 180 : 6 + implicitHeight: control.horizontal ? 6 : 180 + width: control.horizontal ? control.availableWidth : implicitWidth + height: control.horizontal ? implicitHeight : control.availableHeight + scale: control.horizontal && control.mirrored ? -1 : 1 + Rectangle{ + anchors.fill: parent + anchors.margins: 1 + radius: 2 + color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1) + } + Rectangle { + x: control.horizontal ? control.first.position * parent.width + 3 : 0 + y: control.horizontal ? 0 : control.second.visualPosition * parent.height + 3 + width: control.horizontal ? control.second.position * parent.width - control.first.position * parent.width - 6 : 6 + height: control.horizontal ? 6 : control.second.position * parent.height - control.first.position * parent.height - 6 + color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark + } + } + FluTooltip{ + parent: control.first.handle + visible: control.tooltipEnabled && (control.first.pressed || control.first.hovered) + text:String(isTipInt?Math.round(control.first.value):control.first.value) + } + FluTooltip{ + parent: control.second.handle + visible: control.tooltipEnabled && (control.second.pressed || control.second.hovered) + text:String(isTipInt?Math.round(control.second.value):control.second.value) + } +} diff --git a/src/resource.qrc b/src/resource.qrc index 9d9e72fc..ada937f7 100644 --- a/src/resource.qrc +++ b/src/resource.qrc @@ -92,5 +92,6 @@ Qt5/imports/FluentUI/Controls/ColorPicker/Content/NumberBox.qml Qt5/imports/FluentUI/Controls/ColorPicker/Content/PanelBorder.qml Qt5/imports/FluentUI/Controls/ColorPicker/Content/SBPicker.qml + Qt5/imports/FluentUI/Controls/FluRangeSlider.qml