From c9600ecb3c8df51c81ac68021732e3da3c3cccf3 Mon Sep 17 00:00:00 2001 From: Mentalflow <312902918@qq.com> Date: Thu, 27 Jun 2024 23:18:25 +0800 Subject: [PATCH] RibbonProgressBar: Added. --- example/qml/Qt5/example.qml | 78 ++++++++++++++ example/qml/Qt6/example.qml | 78 ++++++++++++++ lib_source/CMakeLists.txt | 2 +- lib_source/qml/Qt5/RibbonProgressBar.qml | 126 +++++++++++++++++++++++ lib_source/qml/Qt6/RibbonProgressBar.qml | 126 +++++++++++++++++++++++ 5 files changed, 409 insertions(+), 1 deletion(-) create mode 100644 lib_source/qml/Qt5/RibbonProgressBar.qml create mode 100644 lib_source/qml/Qt6/RibbonProgressBar.qml diff --git a/example/qml/Qt5/example.qml b/example/qml/Qt5/example.qml index fb7c4cd..e1acfbe 100644 --- a/example/qml/Qt5/example.qml +++ b/example/qml/Qt5/example.qml @@ -535,6 +535,84 @@ RibbonWindow { } } } + RibbonTabPage{ + title: qsTr("Progress") + RibbonTabGroup{ + width: progressbar_layout.width + 30 + text: qsTr("ProgressBar") + RowLayout{ + id: progressbar_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Top + } + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Left + } + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Right + } + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Bottom + } + } + RibbonSlider{ + id: progressbar_slider + Layout.alignment: Qt.AlignHCenter + slideWidth: 40 + horizontal: false + showButton: false + value: 40 + } + ColumnLayout{ + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Top + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Left + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Right + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Bottom + } + } + ColumnLayout{ + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + showText: false + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: false + showText: false + value: progressbar_slider.value / 100 + } + } + } + } + } RibbonTabPage{ title: qsTr("Views") RibbonTabGroup{ diff --git a/example/qml/Qt6/example.qml b/example/qml/Qt6/example.qml index 39a3b2c..3619e98 100644 --- a/example/qml/Qt6/example.qml +++ b/example/qml/Qt6/example.qml @@ -535,6 +535,84 @@ RibbonWindow { } } } + RibbonTabPage{ + title: qsTr("Progress") + RibbonTabGroup{ + width: progressbar_layout.width + 30 + text: qsTr("ProgressBar") + RowLayout{ + id: progressbar_layout + anchors.centerIn: parent + height: parent.height + spacing: 10 + ColumnLayout{ + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Top + } + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Left + } + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Right + } + RibbonProgressBar{ + barWidth: 100 + value: progressbar_slider.value / 100 + textLabelPosition: RibbonProgressBar.LabelPosition.Bottom + } + } + RibbonSlider{ + id: progressbar_slider + Layout.alignment: Qt.AlignHCenter + slideWidth: 40 + horizontal: false + showButton: false + value: 40 + } + ColumnLayout{ + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Top + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Left + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Right + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + textLabelPosition: RibbonProgressBar.LabelPosition.Bottom + } + } + ColumnLayout{ + RibbonProgressBar{ + barWidth: 100 + indeterminate: true + showText: false + } + RibbonProgressBar{ + barWidth: 100 + indeterminate: false + showText: false + value: progressbar_slider.value / 100 + } + } + } + } + } RibbonTabPage{ title: qsTr("Views") RibbonTabGroup{ diff --git a/lib_source/CMakeLists.txt b/lib_source/CMakeLists.txt index de42fd3..991020a 100644 --- a/lib_source/CMakeLists.txt +++ b/lib_source/CMakeLists.txt @@ -40,7 +40,7 @@ set(qml_files RibbonTabBar.qml RibbonTabButton.qml RibbonView.qml RibbonMessageListView.qml RibbonTour.qml RibbonTourContent.qml RibbonBackStageView.qml RibbonBackStagePage.qml RibbonBackStageGroup.qml RibbonRadioButton.qml RibbonBackStageMenuItem.qml RibbonTourItem.qml - RibbonObject.qml) + RibbonObject.qml RibbonProgressBar.qml) set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/") diff --git a/lib_source/qml/Qt5/RibbonProgressBar.qml b/lib_source/qml/Qt5/RibbonProgressBar.qml new file mode 100644 index 0000000..2608499 --- /dev/null +++ b/lib_source/qml/Qt5/RibbonProgressBar.qml @@ -0,0 +1,126 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtGraphicalEffects 1.0 +import RibbonUI 1.0 + +Item{ + id: control + implicitHeight: (textLabelPosition === RibbonProgressBar.LabelPosition.Top || textLabelPosition === RibbonProgressBar.LabelPosition.Bottom && showText ? + (text_label.contentHeight + textLabelMargin + bar.implicitHeight) : showText ? Math.max(bar.implicitHeight, text_label.contentHeight) : bar.implicitHeight) + implicitWidth: bar.implicitWidth + (textLabelPosition === RibbonProgressBar.LabelPosition.Left || textLabelPosition === RibbonProgressBar.LabelPosition.Right && showText ? + (text_label.contentWidth + textLabelMargin) : 0) + enum LabelPosition { + Top, + Left, + Right, + Bottom + } + property color indicatorColor: RibbonTheme.isDarkMode ? "#8AAAEB" : "#5DA3E8" + property color bgColor: RibbonTheme.isDarkMode ? "#6C6C6C" : "#EFEFEF" + property int barWidth: 200 + property int barHeight: 6 + property bool showText: true + property int textLabelMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Top || textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? 0 : 5 + property int animationDurarion: 800 + property int indeterminateWidth: barWidth * 0.25 + property int textLabelPosition: bar.mirrored ? RibbonProgressBar.LabelPosition.Left : RibbonProgressBar.LabelPosition.Right + property string text: qsTr("Loading") + property alias value: bar.value + property alias visualPosition: bar.visualPosition + property alias position: bar.position + property alias indeterminate: bar.indeterminate + property alias bar: bar + + ProgressBar { + id: bar + clip: true + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + anchors{ + left: textLabelPosition === RibbonProgressBar.LabelPosition.Right ? control.left : undefined + right: textLabelPosition === RibbonProgressBar.LabelPosition.Left ? control.right : undefined + bottom: textLabelPosition === RibbonProgressBar.LabelPosition.Top ? control.bottom : undefined + top: textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? control.top : undefined + verticalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Left || + textLabelPosition === RibbonProgressBar.LabelPosition.Right ? + control.verticalCenter : undefined + horizontalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Top || + textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? + control.horizontalCenter : undefined + } + + contentItem: Item{ + id: item + implicitHeight: barHeight + implicitWidth: barWidth + height: implicitHeight + anchors.verticalCenter: bar.verticalCenter + clip: true + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle{ + implicitWidth: item.width + implicitHeight: item.height + radius: item.height / 2 + } + } + Rectangle{ + x:0 + anchors.verticalCenter: parent.verticalCenter + implicitHeight: barHeight + implicitWidth: { + if(!indeterminate) + { + return barWidth * visualPosition + } + else + return indeterminateWidth + } + radius: height / 2 + color: indicatorColor + PropertyAnimation on x { + running: indeterminate && visible + from: -indeterminateWidth + to:barWidth+indeterminateWidth + loops: Animation.Infinite + duration: animationDurarion + easing.type: Easing.OutInQuad + } + } + } + + background: Rectangle { + implicitWidth: barWidth + implicitHeight: barHeight + height: barHeight + radius: height / 2 + anchors.verticalCenter: bar.verticalCenter + color: bgColor + } + } + + RibbonText{ + id: text_label + viewOnly: true + text: indeterminate ? control.text : (visualPosition * 100).toFixed(0) + "%" + visible: showText + anchors{ + top: textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? bar.bottom : undefined + topMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? textLabelMargin : 0 + right: textLabelPosition === RibbonProgressBar.LabelPosition.Left ? bar.left : undefined + rightMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Left ? textLabelMargin : 0 + left: textLabelPosition === RibbonProgressBar.LabelPosition.Right ? bar.right : undefined + leftMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Right ? textLabelMargin : 0 + bottom: textLabelPosition === RibbonProgressBar.LabelPosition.Top ? bar.top : undefined + bottomMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Top ? textLabelMargin : 0 + verticalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Left || + textLabelPosition === RibbonProgressBar.LabelPosition.Right ? + bar.verticalCenter : undefined + horizontalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Top || + textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? + bar.horizontalCenter : undefined + } + } +} diff --git a/lib_source/qml/Qt6/RibbonProgressBar.qml b/lib_source/qml/Qt6/RibbonProgressBar.qml new file mode 100644 index 0000000..d739713 --- /dev/null +++ b/lib_source/qml/Qt6/RibbonProgressBar.qml @@ -0,0 +1,126 @@ +import QtQuick +import QtQuick.Controls +import Qt5Compat.GraphicalEffects +import RibbonUI + +Item{ + id: control + implicitHeight: (textLabelPosition === RibbonProgressBar.LabelPosition.Top || textLabelPosition === RibbonProgressBar.LabelPosition.Bottom && showText ? + (text_label.contentHeight + textLabelMargin + bar.implicitHeight) : showText ? Math.max(bar.implicitHeight, text_label.contentHeight) : bar.implicitHeight) + implicitWidth: bar.implicitWidth + (textLabelPosition === RibbonProgressBar.LabelPosition.Left || textLabelPosition === RibbonProgressBar.LabelPosition.Right && showText ? + (text_label.contentWidth + textLabelMargin) : 0) + enum LabelPosition { + Top, + Left, + Right, + Bottom + } + property color indicatorColor: RibbonTheme.isDarkMode ? "#8AAAEB" : "#5DA3E8" + property color bgColor: RibbonTheme.isDarkMode ? "#6C6C6C" : "#EFEFEF" + property int barWidth: 200 + property int barHeight: 6 + property bool showText: true + property int textLabelMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Top || textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? 0 : 5 + property int animationDurarion: 800 + property int indeterminateWidth: barWidth * 0.25 + property int textLabelPosition: bar.mirrored ? RibbonProgressBar.LabelPosition.Left : RibbonProgressBar.LabelPosition.Right + property string text: qsTr("Loading") + property alias value: bar.value + property alias visualPosition: bar.visualPosition + property alias position: bar.position + property alias indeterminate: bar.indeterminate + property alias bar: bar + + ProgressBar { + id: bar + clip: true + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + anchors{ + left: textLabelPosition === RibbonProgressBar.LabelPosition.Right ? control.left : undefined + right: textLabelPosition === RibbonProgressBar.LabelPosition.Left ? control.right : undefined + bottom: textLabelPosition === RibbonProgressBar.LabelPosition.Top ? control.bottom : undefined + top: textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? control.top : undefined + verticalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Left || + textLabelPosition === RibbonProgressBar.LabelPosition.Right ? + control.verticalCenter : undefined + horizontalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Top || + textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? + control.horizontalCenter : undefined + } + + contentItem: Item{ + id: item + implicitHeight: barHeight + implicitWidth: barWidth + height: implicitHeight + anchors.verticalCenter: bar.verticalCenter + clip: true + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle{ + implicitWidth: item.width + implicitHeight: item.height + radius: item.height / 2 + } + } + Rectangle{ + x:0 + anchors.verticalCenter: parent.verticalCenter + implicitHeight: barHeight + implicitWidth: { + if(!indeterminate) + { + return barWidth * visualPosition + } + else + return indeterminateWidth + } + radius: height / 2 + color: indicatorColor + PropertyAnimation on x { + running: indeterminate && visible + from: -indeterminateWidth + to:barWidth+indeterminateWidth + loops: Animation.Infinite + duration: animationDurarion + easing.type: Easing.OutInQuad + } + } + } + + background: Rectangle { + implicitWidth: barWidth + implicitHeight: barHeight + height: barHeight + radius: height / 2 + anchors.verticalCenter: bar.verticalCenter + color: bgColor + } + } + + RibbonText{ + id: text_label + viewOnly: true + text: indeterminate ? control.text : (visualPosition * 100).toFixed(0) + "%" + visible: showText + anchors{ + top: textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? bar.bottom : undefined + topMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? textLabelMargin : 0 + right: textLabelPosition === RibbonProgressBar.LabelPosition.Left ? bar.left : undefined + rightMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Left ? textLabelMargin : 0 + left: textLabelPosition === RibbonProgressBar.LabelPosition.Right ? bar.right : undefined + leftMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Right ? textLabelMargin : 0 + bottom: textLabelPosition === RibbonProgressBar.LabelPosition.Top ? bar.top : undefined + bottomMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Top ? textLabelMargin : 0 + verticalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Left || + textLabelPosition === RibbonProgressBar.LabelPosition.Right ? + bar.verticalCenter : undefined + horizontalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Top || + textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? + bar.horizontalCenter : undefined + } + } +}