update

2024-10-31 00:07:36 +08:00 · 2023-07-25 17:57:37 +08:00 · 2023-07-25 17:57:37 +08:00 · b22e79148b
commit b22e79148b
parent 7122407b0b
5 changed files with 111 additions and 113 deletions
--- a/example/qml/page/T_Http.qml
+++ b/example/qml/page/T_Http.qml
@ -63,12 +63,15 @@ FluScrollablePage{
        onFinish: {
            btn_download.disabled = false
            btn_download.text = "下载文件"
+            text_file_size.text = ""
        }
        onDownloadProgress:
            (recv,total)=>{
+                var locale = Qt.locale()
                var precent = (recv/total * 100).toFixed(0) + "%"
                console.debug(precent)
                btn_download.text = "下载中..."+precent
+                text_file_size.text =  "%1/%2".arg(locale.formattedDataSize(recv)).arg(locale.formattedDataSize(total))
            }
        onError:
            (status,errorString)=>{
@ -101,13 +104,20 @@ FluScrollablePage{
                    http_post.post({k:"jitpack"})
                }
            }
-            FluButton{
-                id:btn_download
-                text:disabled ? "下载中..." : "下载文件"
-                onClicked: {
-                    file_dialog.open()
+            RowLayout{
+                FluButton{
+                    id:btn_download
+                    text:disabled ? "下载中..." : "下载文件"
+                    onClicked: {
+                        file_dialog.open()
+                    }
+                }
+                FluText{
+                    id:text_file_size
+                    Layout.alignment: Qt.AlignVCenter
                }
            }
+
        }
    }

@ -125,6 +135,7 @@ FluScrollablePage{
        id:window_result
        width: 600
        height: 400
+        color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
        Item{
            anchors.fill: parent
            Flickable{
--- a/example/qml/page/T_Progress.qml
+++ b/example/qml/page/T_Progress.qml
@ -12,7 +12,7 @@ FluScrollablePage{
    FluArea{
        Layout.fillWidth: true
        Layout.topMargin: 20
-        height: 110
+        height: 130
        paddings: 10

        ColumnLayout{
@ -45,7 +45,7 @@ FluProgressRing{
    FluArea{
        Layout.fillWidth: true
        Layout.topMargin: 20
-        height: 230
+        height: 286
        paddings: 10

        ColumnLayout{
@ -59,21 +59,24 @@ FluProgressRing{
            }
            FluProgressBar{
                indeterminate: false
-                progress: slider.value/100
-            }
-            FluProgressRing{
-                indeterminate: false
-                progress: slider.value/100
+                value:slider.value/100
+                Layout.topMargin: 10
            }
            FluProgressBar{
                indeterminate: false
+                value:slider.value/100
                progressVisible: true
-                progress: slider.value/100
+                Layout.topMargin: 10
            }
            FluProgressRing{
                indeterminate: false
+                value: slider.value/100
+                Layout.topMargin: 10
+            }
+            FluProgressRing{
                progressVisible: true
-                progress: slider.value/100
+                indeterminate: false
+                value: slider.value/100
            }
            FluSlider{
                id:slider
--- a/example/qml/window/MainWindow.qml
+++ b/example/qml/window/MainWindow.qml
@ -164,7 +164,7 @@ CustomWindow {
                height: parent.height
                z:999
                //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
-                //                 pageMode: FluNavigationViewType.Stack
+                pageMode: FluNavigationViewType.Stack
                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
 //                pageMode: FluNavigationViewType.NoStack
                items: ItemsOriginal
--- a/src/imports/FluentUI/Controls/FluProgressBar.qml
+++ b/src/imports/FluentUI/Controls/FluProgressBar.qml
@ -2,56 +2,48 @@ import QtQuick
 import QtQuick.Controls
 import FluentUI

-Item{
-
-    property real progress: 0.5
-    property bool indeterminate: true
+ProgressBar{
+    property real strokeWidth: 6
    property bool progressVisible: false
-    id: control
-    width: 150
-    height: 5
-
-    FluRectangle {
-        shadow: false
-        radius: [3,3,3,3]
-        anchors.fill: parent
-        color:  FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
-        Component.onCompleted: {
-            if(indeterminate){
-                bar.x = -control.width*0.5
-                behavior.enabled = true
-                bar.x = control.width
-            }else{
-                bar.x = 0
-            }
-        }
-        Rectangle{
-            id:bar
-            radius: 3
-            width: control.width*progress
-            height:  control.height
-            color:FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-            Behavior on x{
-                id:behavior
-                enabled: false
-                NumberAnimation{
-                    duration: 1000
-                    onRunningChanged: {
-                        if(!running){
-                            behavior.enabled = false
-                            bar.x = -control.width*0.5
-                            behavior.enabled = true
-                            bar.x = control.width
-                        }
-                    }
+    property color color: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+    property color backgroundColor : FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
+    id:control
+    indeterminate : true
+    QtObject{
+        id:d
+        property real _radius: strokeWidth/2
+    }
+    background: Rectangle {
+        implicitWidth: 150
+        implicitHeight: control.strokeWidth
+        color: control.backgroundColor
+        radius: d._radius
+    }
+    contentItem: FluItem {
+        clip: true
+        radius: [d._radius,d._radius,d._radius,d._radius]
+        Rectangle {
+            id:rect_progress
+            width: {
+                if(control.indeterminate){
+                    return 0.5 * parent.width
                }
+                return control.visualPosition * parent.width
+            }
+            height: parent.height
+            radius: d._radius
+            color: control.color
+            PropertyAnimation on x {
+                running: control.indeterminate && control.visible
+                from: -rect_progress.width
+                to:control.width+rect_progress.width
+                loops: Animation.Infinite
+                duration: 888
            }
        }
    }
-
    FluText{
-        text:(control.progress * 100).toFixed(0) + "%"
-        font.pixelSize: 10
+        text:(control.visualPosition * 100).toFixed(0) + "%"
        visible: {
            if(control.indeterminate){
                return false
--- a/src/imports/FluentUI/Controls/FluProgressRing.qml
+++ b/src/imports/FluentUI/Controls/FluProgressRing.qml
@ -1,32 +1,31 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Shapes
 import FluentUI

-Rectangle {
-    property real linWidth : 5
-    property real progress: 0.25
-    property bool indeterminate: true
-    property color primaryColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+ProgressBar{
+    property real strokeWidth: 6
    property bool progressVisible: false
-    id: control
-    width: 44
-    height: 44
-    radius: width/2
-    border.width: linWidth
-    color: "#00000000"
-    border.color: FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
-    onProgressChanged: {
-        canvas.requestPaint()
-    }
-    Component.onCompleted: {
-        if(indeterminate){
-            behavior.enabled = true
-            control.rotation = 360
-        }
+    property color color: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+    property color backgroundColor : FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
+    id:control
+    indeterminate : true
+    clip: true
+    background: Rectangle {
+        implicitWidth: 56
+        implicitHeight: 56
+        radius: control.width/2
+        color:"transparent"
+        border.color: control.backgroundColor
+        border.width: control.strokeWidth
    }
    QtObject{
        id:d
-        property real _radius: control.radius-control.linWidth/2
+        property real _radius: control.width/2-control.strokeWidth/2
+        property real _progress: control.indeterminate ? 0.3 :  control.visualPosition
+        on_ProgressChanged: {
+            canvas.requestPaint()
+        }
    }
    Connections{
        target: FluTheme
@ -34,43 +33,35 @@ Rectangle {
            canvas.requestPaint()
        }
    }
-    Behavior on rotation{
-        id:behavior
-        enabled: false
-        NumberAnimation{
-            duration: 999
-            onRunningChanged: {
-                if(!running){
-                    behavior.enabled = false
-                    control.rotation = 0
-                    behavior.enabled = true
-                    control.rotation = 360
-                }
+    contentItem: Item {
+        RotationAnimation on rotation {
+            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
+            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.beginPath()
+                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()
            }
        }
    }
-    Canvas {
-        id:canvas
-        anchors.fill: parent
-        antialiasing: true
-        renderTarget: Canvas.Image
-        onPaint: {
-            var ctx = canvas.getContext("2d")
-            ctx.clearRect(0, 0, canvas.width, canvas.height)
-            ctx.save()
-            ctx.lineWidth = linWidth
-            ctx.strokeStyle = primaryColor
-            ctx.fillStyle = primaryColor
-            ctx.beginPath()
-            ctx.arc(width/2, height/2, d._radius ,-0.5 * Math.PI,-0.5 * Math.PI + progress * 2 * Math.PI)
-            ctx.stroke()
-            ctx.closePath()
-            ctx.restore()
-        }
-    }
    FluText{
-        text:(control.progress * 100).toFixed(0) + "%"
-        font.pixelSize: 10
+        text:(control.visualPosition * 100).toFixed(0) + "%"
        visible: {
            if(control.indeterminate){
                return false
@ -80,3 +71,4 @@ Rectangle {
        anchors.centerIn: parent
    }
 }
+