amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-26 13:27:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
huangkangfa 2024-02-21 13:29:22 +08:00
parent e92b1dbea6
commit 438d1fe623
4 changed files with 90 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/Qt5/imports/FluentUI/Controls/FluProgressRing.qml
View File

@ -4,6 +4,7 @@ import QtQuick.Shapes 1.15
import FluentUI 1.0 import FluentUI 1.0
ProgressBar{ ProgressBar{
property int duration: 2000
property real strokeWidth: 6 property real strokeWidth: 6
property bool progressVisible: false property bool progressVisible: false
property color color: FluTheme.primaryColor property color color: FluTheme.primaryColor
@ -20,16 +21,12 @@ ProgressBar{
border.width: control.strokeWidth border.width: control.strokeWidth
} }
onIndeterminateChanged:{ onIndeterminateChanged:{
if(!indeterminate){ canvas.requestPaint()
animator_r.duration = 0
layout_item.rotation = 0
animator_r.duration = 888
}
} }
QtObject{ QtObject{
id:d id:d
property real _radius: control.width/2-control.strokeWidth/2 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: { on_ProgressChanged: {
canvas.requestPaint() canvas.requestPaint()
} }
@ -42,27 +39,39 @@ ProgressBar{
} }
contentItem: Item { contentItem: Item {
id:layout_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 { Canvas {
id:canvas id:canvas
anchors.fill: parent anchors.fill: parent
antialiasing: true antialiasing: true
renderTarget: Canvas.Image 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: { onPaint: {
var ctx = canvas.getContext("2d") var ctx = canvas.getContext("2d")
ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.save() ctx.save()
ctx.lineWidth = control.strokeWidth ctx.lineWidth = control.strokeWidth
ctx.strokeStyle = control.color ctx.strokeStyle = control.color
ctx.lineCap = "round"
ctx.beginPath() 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.stroke()
ctx.closePath() ctx.closePath()
ctx.restore() ctx.restore()
@ -80,4 +89,3 @@ ProgressBar{
anchors.centerIn: parent anchors.centerIn: parent
} }
} }

18
src/Qt5/imports/FluentUI/Controls/FluShortcutPicker.qml
View File

@ -123,9 +123,10 @@ FluIconButton {
visible: control.activeFocus visible: control.activeFocus
} }
} }
component ItemKey:Rectangle{ Component{
id:com_item_key
Rectangle{
id:item_key_control id:item_key_control
property string text : ""
color:FluTheme.primaryColor color:FluTheme.primaryColor
width: Math.max(item_text.implicitWidth+12,28) width: Math.max(item_text.implicitWidth+12,28)
height: Math.max(item_text.implicitHeight,28) height: Math.max(item_text.implicitHeight,28)
@ -134,18 +135,20 @@ FluIconButton {
id:item_text id:item_text
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
font.pixelSize: 13 font.pixelSize: 13
text: item_key_control.text text: keyText
anchors.centerIn: parent anchors.centerIn: parent
} }
} }
}
Row{ Row{
id:layout_row id:layout_row
spacing: 5 spacing: 5
anchors.centerIn: parent anchors.centerIn: parent
Repeater{ Repeater{
model: control.current model: control.current
delegate: ItemKey{ delegate: Loader{
text: modelData property var keyText: modelData
sourceComponent: com_item_key
} }
} }
Item{ Item{
@ -217,8 +220,9 @@ FluIconButton {
anchors.centerIn: parent anchors.centerIn: parent
Repeater{ Repeater{
model: content_dialog.keysModel model: content_dialog.keysModel
delegate: ItemKey{ delegate: Loader{
text: modelData property var keyText: modelData
sourceComponent: com_item_key
} }
} }
} }

40
src/Qt6/imports/FluentUI/Controls/FluProgressRing.qml
View File

@ -4,7 +4,7 @@ import QtQuick.Controls.Basic
import FluentUI import FluentUI
ProgressBar{ ProgressBar{
property int duration: 888 property int duration: 2000
property real strokeWidth: 6 property real strokeWidth: 6
property bool progressVisible: false property bool progressVisible: false
property color color: FluTheme.primaryColor property color color: FluTheme.primaryColor
@ -21,16 +21,12 @@ ProgressBar{
border.width: control.strokeWidth border.width: control.strokeWidth
} }
onIndeterminateChanged:{ onIndeterminateChanged:{
if(!indeterminate){ canvas.requestPaint()
animator_r.duration = 0
layout_item.rotation = 0
animator_r.duration = control.duration
}
} }
QtObject{ QtObject{
id:d id:d
property real _radius: control.width/2-control.strokeWidth/2 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: { on_ProgressChanged: {
canvas.requestPaint() canvas.requestPaint()
} }
@ -43,27 +39,39 @@ ProgressBar{
} }
contentItem: Item { contentItem: Item {
id:layout_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 { Canvas {
id:canvas id:canvas
anchors.fill: parent anchors.fill: parent
antialiasing: true antialiasing: true
renderTarget: Canvas.Image 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: { onPaint: {
var ctx = canvas.getContext("2d") var ctx = canvas.getContext("2d")
ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.save() ctx.save()
ctx.lineWidth = control.strokeWidth ctx.lineWidth = control.strokeWidth
ctx.strokeStyle = control.color ctx.strokeStyle = control.color
ctx.lineCap = "round"
ctx.beginPath() 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.stroke()
ctx.closePath() ctx.closePath()
ctx.restore() ctx.restore()

18
src/Qt6/imports/FluentUI/Controls/FluShortcutPicker.qml
View File

@ -123,9 +123,10 @@ FluIconButton {
visible: control.activeFocus visible: control.activeFocus
} }
} }
component ItemKey:Rectangle{ Component{
id:com_item_key
Rectangle{
id:item_key_control id:item_key_control
property string text : ""
color:FluTheme.primaryColor color:FluTheme.primaryColor
width: Math.max(item_text.implicitWidth+12,28) width: Math.max(item_text.implicitWidth+12,28)
height: Math.max(item_text.implicitHeight,28) height: Math.max(item_text.implicitHeight,28)
@ -134,18 +135,20 @@ FluIconButton {
id:item_text id:item_text
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
font.pixelSize: 13 font.pixelSize: 13
text: item_key_control.text text: keyText
anchors.centerIn: parent anchors.centerIn: parent
} }
} }
}
Row{ Row{
id:layout_row id:layout_row
spacing: 5 spacing: 5
anchors.centerIn: parent anchors.centerIn: parent
Repeater{ Repeater{
model: control.current model: control.current
delegate: ItemKey{ delegate: Loader{
text: modelData property var keyText: modelData
sourceComponent: com_item_key
} }
} }
Item{ Item{
@ -217,8 +220,9 @@ FluIconButton {
anchors.centerIn: parent anchors.centerIn: parent
Repeater{ Repeater{
model: content_dialog.keysModel model: content_dialog.keysModel
delegate: ItemKey{ delegate: Loader{
text: modelData property var keyText: modelData
sourceComponent: com_item_key
} }
} }
} }