amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-23 11:17:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix #264

Browse Source
This commit is contained in:
朱子楚\zhuzi 2023-08-27 12:40:02 +08:00
parent e30db258ca
commit 56a62f0b29
10 changed files with 295 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
example/qml-Qt6/component/CodeExpander.qml
View File

@ -136,7 +136,8 @@ FluExpander{
"FluTour",
"FluQRCode",
"FluTimeline",
"FluChart"
"FluChart",
"FluRangeSlider"
];
code = code.replace(/\n/g, "<br>");
code = code.replace(/ /g, "&nbsp;");

29
example/qml-Qt6/page/T_Slider.qml
View File

@ -11,13 +11,20 @@ FluScrollablePage{
FluArea{
Layout.fillWidth: true
height: 100
paddings: 10
Layout.preferredHeight: 200
Layout.topMargin: 20
paddings: 10
Row{
spacing: 30
FluSlider{
}
FluSlider{
orientation: Qt.Vertical
anchors.verticalCenter: parent.verticalCenter
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
@ -26,25 +33,27 @@ FluScrollablePage{
}'
}
FluArea{
Layout.fillWidth: true
height: 200
paddings: 10
Layout.preferredHeight: 200
Layout.topMargin: 20
FluSlider{
paddings: 10
Row{
spacing: 30
FluRangeSlider{
}
FluRangeSlider{
orientation: Qt.Vertical
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluSlider{
code:'FluRangeSlider{
orientation: Qt.Vertical
value:50
}'
}
}

3
example/qml/component/CodeExpander.qml
View File

@ -136,7 +136,8 @@ FluExpander{
"FluTour",
"FluQRCode",
"FluTimeline",
"FluChart"
"FluChart",
"FluRangeSlider"
];
code = code.replace(/\n/g, "<br>");
code = code.replace(/ /g, "&nbsp;");

30
example/qml/page/T_Slider.qml
View File

@ -12,13 +12,20 @@ FluScrollablePage{
FluArea{
Layout.fillWidth: true
height: 100
paddings: 10
Layout.preferredHeight: 200
Layout.topMargin: 20
paddings: 10
Row{
spacing: 30
FluSlider{
}
FluSlider{
orientation: Qt.Vertical
anchors.verticalCenter: parent.verticalCenter
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
@ -27,25 +34,28 @@ FluScrollablePage{
}'
}
FluArea{
Layout.fillWidth: true
height: 200
paddings: 10
Layout.preferredHeight: 200
Layout.topMargin: 20
FluSlider{
paddings: 10
Row{
spacing: 30
FluRangeSlider{
}
FluRangeSlider{
orientation: Qt.Vertical
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluSlider{
code:'FluRangeSlider{
orientation: Qt.Vertical
value:50
}'
}
}

2
example/src/main.cpp
View File

@ -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);

120
src/Qt5/imports/FluentUI/Controls/FluRangeSlider.qml Normal file
View File

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

1
src/Qt5/imports/FluentUI/Controls/FluStatusView.qml
View File

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

1
src/Qt5/imports/FluentUI/qmldir
View File

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

120
src/Qt6/imports/FluentUI/Controls/FluRangeSlider.qml Normal file
View File

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

1
src/resource.qrc
View File

@ -92,5 +92,6 @@
<file>Qt5/imports/FluentUI/Controls/ColorPicker/Content/NumberBox.qml</file>
<file>Qt5/imports/FluentUI/Controls/ColorPicker/Content/PanelBorder.qml</file>
<file>Qt5/imports/FluentUI/Controls/ColorPicker/Content/SBPicker.qml</file>
<file>Qt5/imports/FluentUI/Controls/FluRangeSlider.qml</file>
</qresource>
</RCC>