From b22e79148b9c978c328343171386391fad4a09dc Mon Sep 17 00:00:00 2001 From: zhuzichu Date: Tue, 25 Jul 2023 17:57:37 +0800 Subject: [PATCH] update --- example/qml/page/T_Http.qml | 21 +++- example/qml/page/T_Progress.qml | 21 ++-- example/qml/window/MainWindow.qml | 2 +- .../FluentUI/Controls/FluProgressBar.qml | 80 +++++++------- .../FluentUI/Controls/FluProgressRing.qml | 100 ++++++++---------- 5 files changed, 111 insertions(+), 113 deletions(-) diff --git a/example/qml/page/T_Http.qml b/example/qml/page/T_Http.qml index ee18fd90..539ceed5 100644 --- 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{ diff --git a/example/qml/page/T_Progress.qml b/example/qml/page/T_Progress.qml index 27bf6418..cb4740b5 100644 --- 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 diff --git a/example/qml/window/MainWindow.qml b/example/qml/window/MainWindow.qml index 0a33054e..c2918f09 100644 --- 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 diff --git a/src/imports/FluentUI/Controls/FluProgressBar.qml b/src/imports/FluentUI/Controls/FluProgressBar.qml index 2a45c091..f84e131f 100644 --- 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 diff --git a/src/imports/FluentUI/Controls/FluProgressRing.qml b/src/imports/FluentUI/Controls/FluProgressRing.qml index 5eec679c..899be890 100644 --- 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 } } +