update

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,6 +104,7 @@ FluScrollablePage{
                     http_post.post({k:"jitpack"})
                 }
             }
+            RowLayout{
                 FluButton{
                     id:btn_download
                     text:disabled ? "下载中..." : "下载文件"
@@ -108,6 +112,12 @@ FluScrollablePage{
                         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{

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
+                value:slider.value/100
-            }
+                Layout.topMargin: 10
-            FluProgressRing{
-                indeterminate: false
-                progress: slider.value/100
             }
             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

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

src/imports/FluentUI/Controls/FluProgressBar.qml

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

src/imports/FluentUI/Controls/FluProgressRing.qml

@@ -1,32 +1,31 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Shapes
 import FluentUI
 
-Rectangle {
+ProgressBar{
-    property real linWidth : 5
+    property real strokeWidth: 6
-    property real progress: 0.25
-    property bool indeterminate: true
-    property color primaryColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
     property bool progressVisible: false
-    id: control
+    property color color: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-    width: 44
+    property color backgroundColor : FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
-    height: 44
+    id:control
-    radius: width/2
+    indeterminate : true
-    border.width: linWidth
+    clip: true
-    color: "#00000000"
+    background: Rectangle {
-    border.color: FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
+        implicitWidth: 56
-    onProgressChanged: {
+        implicitHeight: 56
-        canvas.requestPaint()
+        radius: control.width/2
-    }
+        color:"transparent"
-    Component.onCompleted: {
+        border.color: control.backgroundColor
-        if(indeterminate){
+        border.width: control.strokeWidth
-            behavior.enabled = true
-            control.rotation = 360
-        }
     }
     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,20 +33,13 @@ Rectangle {
             canvas.requestPaint()
         }
     }
-    Behavior on rotation{
+    contentItem: Item {
-        id:behavior
+        RotationAnimation on rotation {
-        enabled: false
+            running: control.indeterminate && control.visible
-        NumberAnimation{
+            from: 0
-            duration: 999
+            to:360
-            onRunningChanged: {
+            loops: Animation.Infinite
-                if(!running){
+            duration: 888
-                    behavior.enabled = false
-                    control.rotation = 0
-                    behavior.enabled = true
-                    control.rotation = 360
-                }
-            }
-        }
         }
         Canvas {
             id:canvas
@@ -58,19 +50,18 @@ Rectangle {
                 var ctx = canvas.getContext("2d")
                 ctx.clearRect(0, 0, canvas.width, canvas.height)
                 ctx.save()
-            ctx.lineWidth = linWidth
+                ctx.lineWidth = control.strokeWidth
-            ctx.strokeStyle = primaryColor
+                ctx.strokeStyle = control.color
-            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.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()
             }
         }
+    }
     FluText{
-        text:(control.progress * 100).toFixed(0) + "%"
+        text:(control.visualPosition * 100).toFixed(0) + "%"
-        font.pixelSize: 10
         visible: {
             if(control.indeterminate){
                 return false
@@ -80,3 +71,4 @@ Rectangle {
         anchors.centerIn: parent
     }
 }
+