amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2025-07-01 23:51:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzichu
2023-07-25 17:57:37 +08:00
parent 7122407b0b
commit b22e79148b
5 changed files with 111 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/imports/FluentUI/Controls/FluProgressBar.qml
View File

@ -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

100
src/imports/FluentUI/Controls/FluProgressRing.qml
View File

@ -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
}
}