From 438d1fe6234b688d38846f460a7482af9fa1453b Mon Sep 17 00:00:00 2001 From: huangkangfa <1664724081@qq.com> Date: Wed, 21 Feb 2024 13:29:22 +0800 Subject: [PATCH] update --- .../FluentUI/Controls/FluProgressRing.qml | 40 +++++++++++-------- .../FluentUI/Controls/FluShortcutPicker.qml | 38 ++++++++++-------- .../FluentUI/Controls/FluProgressRing.qml | 40 +++++++++++-------- .../FluentUI/Controls/FluShortcutPicker.qml | 38 ++++++++++-------- 4 files changed, 90 insertions(+), 66 deletions(-) diff --git a/src/Qt5/imports/FluentUI/Controls/FluProgressRing.qml b/src/Qt5/imports/FluentUI/Controls/FluProgressRing.qml index 6cf7b62e..c02268bf 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluProgressRing.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluProgressRing.qml @@ -4,6 +4,7 @@ import QtQuick.Shapes 1.15 import FluentUI 1.0 ProgressBar{ + property int duration: 2000 property real strokeWidth: 6 property bool progressVisible: false property color color: FluTheme.primaryColor @@ -20,16 +21,12 @@ ProgressBar{ border.width: control.strokeWidth } onIndeterminateChanged:{ - if(!indeterminate){ - animator_r.duration = 0 - layout_item.rotation = 0 - animator_r.duration = 888 - } + canvas.requestPaint() } QtObject{ id:d property real _radius: control.width/2-control.strokeWidth/2 - property real _progress: control.indeterminate ? 0.3 : control.visualPosition + property real _progress: control.indeterminate ? 0.0 : control.visualPosition on_ProgressChanged: { canvas.requestPaint() } @@ -42,27 +39,39 @@ ProgressBar{ } contentItem: Item { id:layout_item - RotationAnimation on rotation { - id:animator_r - running: control.indeterminate && control.visible - from: 0 - to:360 - loops: Animation.Infinite - duration: 888 - } Canvas { id:canvas anchors.fill: parent antialiasing: true renderTarget: Canvas.Image + property real startAngle: 0 + property real sweepAngle: 0 + SequentialAnimation on startAngle { + loops: Animation.Infinite + PropertyAnimation { from: 0; to: 450; duration: control.duration/2 } + PropertyAnimation { from: 450; to: 1080; duration: control.duration/2 } + } + SequentialAnimation on sweepAngle { + loops: Animation.Infinite + PropertyAnimation { from: 0; to: 180; duration: control.duration/2 } + PropertyAnimation { from: 180; to: 0; duration: control.duration/2 } + } + onStartAngleChanged: { + requestPaint() + } onPaint: { var ctx = canvas.getContext("2d") ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.save() ctx.lineWidth = control.strokeWidth ctx.strokeStyle = control.color + ctx.lineCap = "round" ctx.beginPath() - ctx.arc(width/2, height/2, d._radius ,-0.5 * Math.PI,-0.5 * Math.PI + d._progress * 2 * Math.PI) + if(control.indeterminate){ + ctx.arc(width/2, height/2, d._radius , Math.PI * (startAngle - 90) / 180, Math.PI * (startAngle - 90 + sweepAngle) / 180) + }else{ + ctx.arc(width/2, height/2, d._radius , -0.5 * Math.PI , -0.5 * Math.PI + d._progress * 2 * Math.PI) + } ctx.stroke() ctx.closePath() ctx.restore() @@ -80,4 +89,3 @@ ProgressBar{ anchors.centerIn: parent } } - diff --git a/src/Qt5/imports/FluentUI/Controls/FluShortcutPicker.qml b/src/Qt5/imports/FluentUI/Controls/FluShortcutPicker.qml index f2f301e4..9aad3a2b 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluShortcutPicker.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluShortcutPicker.qml @@ -123,19 +123,21 @@ FluIconButton { visible: control.activeFocus } } - component ItemKey:Rectangle{ - id:item_key_control - property string text : "" - color:FluTheme.primaryColor - width: Math.max(item_text.implicitWidth+12,28) - height: Math.max(item_text.implicitHeight,28) - radius: 4 - Text{ - id:item_text - color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) - font.pixelSize: 13 - text: item_key_control.text - anchors.centerIn: parent + Component{ + id:com_item_key + Rectangle{ + id:item_key_control + color:FluTheme.primaryColor + width: Math.max(item_text.implicitWidth+12,28) + height: Math.max(item_text.implicitHeight,28) + radius: 4 + Text{ + id:item_text + color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) + font.pixelSize: 13 + text: keyText + anchors.centerIn: parent + } } } Row{ @@ -144,8 +146,9 @@ FluIconButton { anchors.centerIn: parent Repeater{ model: control.current - delegate: ItemKey{ - text: modelData + delegate: Loader{ + property var keyText: modelData + sourceComponent: com_item_key } } Item{ @@ -217,8 +220,9 @@ FluIconButton { anchors.centerIn: parent Repeater{ model: content_dialog.keysModel - delegate: ItemKey{ - text: modelData + delegate: Loader{ + property var keyText: modelData + sourceComponent: com_item_key } } } diff --git a/src/Qt6/imports/FluentUI/Controls/FluProgressRing.qml b/src/Qt6/imports/FluentUI/Controls/FluProgressRing.qml index 730a027f..5813ef50 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluProgressRing.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluProgressRing.qml @@ -4,7 +4,7 @@ import QtQuick.Controls.Basic import FluentUI ProgressBar{ - property int duration: 888 + property int duration: 2000 property real strokeWidth: 6 property bool progressVisible: false property color color: FluTheme.primaryColor @@ -21,16 +21,12 @@ ProgressBar{ border.width: control.strokeWidth } onIndeterminateChanged:{ - if(!indeterminate){ - animator_r.duration = 0 - layout_item.rotation = 0 - animator_r.duration = control.duration - } + canvas.requestPaint() } QtObject{ id:d property real _radius: control.width/2-control.strokeWidth/2 - property real _progress: control.indeterminate ? 0.3 : control.visualPosition + property real _progress: control.indeterminate ? 0.0 : control.visualPosition on_ProgressChanged: { canvas.requestPaint() } @@ -43,27 +39,39 @@ ProgressBar{ } contentItem: Item { id:layout_item - RotationAnimation on rotation { - id:animator_r - running: control.indeterminate && control.visible - from: 0 - to:360 - loops: Animation.Infinite - duration: control.duration - } Canvas { id:canvas anchors.fill: parent antialiasing: true renderTarget: Canvas.Image + property real startAngle: 0 + property real sweepAngle: 0 + SequentialAnimation on startAngle { + loops: Animation.Infinite + PropertyAnimation { from: 0; to: 450; duration: control.duration/2 } + PropertyAnimation { from: 450; to: 1080; duration: control.duration/2 } + } + SequentialAnimation on sweepAngle { + loops: Animation.Infinite + PropertyAnimation { from: 0; to: 180; duration: control.duration/2 } + PropertyAnimation { from: 180; to: 0; duration: control.duration/2 } + } + onStartAngleChanged: { + requestPaint() + } onPaint: { var ctx = canvas.getContext("2d") ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.save() ctx.lineWidth = control.strokeWidth ctx.strokeStyle = control.color + ctx.lineCap = "round" ctx.beginPath() - ctx.arc(width/2, height/2, d._radius ,-0.5 * Math.PI,-0.5 * Math.PI + d._progress * 2 * Math.PI) + if(control.indeterminate){ + ctx.arc(width/2, height/2, d._radius , Math.PI * (startAngle - 90) / 180, Math.PI * (startAngle - 90 + sweepAngle) / 180) + }else{ + ctx.arc(width/2, height/2, d._radius , -0.5 * Math.PI , -0.5 * Math.PI + d._progress * 2 * Math.PI) + } ctx.stroke() ctx.closePath() ctx.restore() diff --git a/src/Qt6/imports/FluentUI/Controls/FluShortcutPicker.qml b/src/Qt6/imports/FluentUI/Controls/FluShortcutPicker.qml index 231517f5..51b17b6c 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluShortcutPicker.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluShortcutPicker.qml @@ -123,19 +123,21 @@ FluIconButton { visible: control.activeFocus } } - component ItemKey:Rectangle{ - id:item_key_control - property string text : "" - color:FluTheme.primaryColor - width: Math.max(item_text.implicitWidth+12,28) - height: Math.max(item_text.implicitHeight,28) - radius: 4 - Text{ - id:item_text - color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) - font.pixelSize: 13 - text: item_key_control.text - anchors.centerIn: parent + Component{ + id:com_item_key + Rectangle{ + id:item_key_control + color:FluTheme.primaryColor + width: Math.max(item_text.implicitWidth+12,28) + height: Math.max(item_text.implicitHeight,28) + radius: 4 + Text{ + id:item_text + color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) + font.pixelSize: 13 + text: keyText + anchors.centerIn: parent + } } } Row{ @@ -144,8 +146,9 @@ FluIconButton { anchors.centerIn: parent Repeater{ model: control.current - delegate: ItemKey{ - text: modelData + delegate: Loader{ + property var keyText: modelData + sourceComponent: com_item_key } } Item{ @@ -217,8 +220,9 @@ FluIconButton { anchors.centerIn: parent Repeater{ model: content_dialog.keysModel - delegate: ItemKey{ - text: modelData + delegate: Loader{ + property var keyText: modelData + sourceComponent: com_item_key } } }