mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-26 05:17:05 +08:00
update
This commit is contained in:
huangkangfa
parent
e92b1dbea6
commit
438d1fe623
@ -4,6 +4,7 @@ import QtQuick.Shapes 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
ProgressBar{
|
||||
property int duration: 2000
|
||||
property real strokeWidth: 6
|
||||
property bool progressVisible: false
|
||||
property color color: FluTheme.primaryColor
|
||||
@ -20,16 +21,12 @@ ProgressBar{
|
||||
border.width: control.strokeWidth
|
||||
}
|
||||
onIndeterminateChanged:{
|
||||
if(!indeterminate){
|
||||
animator_r.duration = 0
|
||||
layout_item.rotation = 0
|
||||
animator_r.duration = 888
|
||||
}
|
||||
canvas.requestPaint()
|
||||
}
|
||||
QtObject{
|
||||
id:d
|
||||
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: {
|
||||
canvas.requestPaint()
|
||||
}
|
||||
@ -42,27 +39,39 @@ ProgressBar{
|
||||
}
|
||||
contentItem: 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 {
|
||||
id:canvas
|
||||
anchors.fill: parent
|
||||
antialiasing: true
|
||||
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: {
|
||||
var ctx = canvas.getContext("2d")
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
ctx.save()
|
||||
ctx.lineWidth = control.strokeWidth
|
||||
ctx.strokeStyle = control.color
|
||||
ctx.lineCap = "round"
|
||||
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.closePath()
|
||||
ctx.restore()
|
||||
@ -80,4 +89,3 @@ ProgressBar{
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -123,19 +123,21 @@ FluIconButton {
|
||||
visible: control.activeFocus
|
||||
}
|
||||
}
|
||||
component ItemKey:Rectangle{
|
||||
id:item_key_control
|
||||
property string text : ""
|
||||
color:FluTheme.primaryColor
|
||||
width: Math.max(item_text.implicitWidth+12,28)
|
||||
height: Math.max(item_text.implicitHeight,28)
|
||||
radius: 4
|
||||
Text{
|
||||
id:item_text
|
||||
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||
font.pixelSize: 13
|
||||
text: item_key_control.text
|
||||
anchors.centerIn: parent
|
||||
Component{
|
||||
id:com_item_key
|
||||
Rectangle{
|
||||
id:item_key_control
|
||||
color:FluTheme.primaryColor
|
||||
width: Math.max(item_text.implicitWidth+12,28)
|
||||
height: Math.max(item_text.implicitHeight,28)
|
||||
radius: 4
|
||||
Text{
|
||||
id:item_text
|
||||
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||
font.pixelSize: 13
|
||||
text: keyText
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
}
|
||||
Row{
|
||||
@ -144,8 +146,9 @@ FluIconButton {
|
||||
anchors.centerIn: parent
|
||||
Repeater{
|
||||
model: control.current
|
||||
delegate: ItemKey{
|
||||
text: modelData
|
||||
delegate: Loader{
|
||||
property var keyText: modelData
|
||||
sourceComponent: com_item_key
|
||||
}
|
||||
}
|
||||
Item{
|
||||
@ -217,8 +220,9 @@ FluIconButton {
|
||||
anchors.centerIn: parent
|
||||
Repeater{
|
||||
model: content_dialog.keysModel
|
||||
delegate: ItemKey{
|
||||
text: modelData
|
||||
delegate: Loader{
|
||||
property var keyText: modelData
|
||||
sourceComponent: com_item_key
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import QtQuick.Controls.Basic
|
||||
import FluentUI
|
||||
|
||||
ProgressBar{
|
||||
property int duration: 888
|
||||
property int duration: 2000
|
||||
property real strokeWidth: 6
|
||||
property bool progressVisible: false
|
||||
property color color: FluTheme.primaryColor
|
||||
@ -21,16 +21,12 @@ ProgressBar{
|
||||
border.width: control.strokeWidth
|
||||
}
|
||||
onIndeterminateChanged:{
|
||||
if(!indeterminate){
|
||||
animator_r.duration = 0
|
||||
layout_item.rotation = 0
|
||||
animator_r.duration = control.duration
|
||||
}
|
||||
canvas.requestPaint()
|
||||
}
|
||||
QtObject{
|
||||
id:d
|
||||
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: {
|
||||
canvas.requestPaint()
|
||||
}
|
||||
@ -43,27 +39,39 @@ ProgressBar{
|
||||
}
|
||||
contentItem: 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 {
|
||||
id:canvas
|
||||
anchors.fill: parent
|
||||
antialiasing: true
|
||||
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: {
|
||||
var ctx = canvas.getContext("2d")
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
ctx.save()
|
||||
ctx.lineWidth = control.strokeWidth
|
||||
ctx.strokeStyle = control.color
|
||||
ctx.lineCap = "round"
|
||||
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.closePath()
|
||||
ctx.restore()
|
||||
|
||||
@ -123,19 +123,21 @@ FluIconButton {
|
||||
visible: control.activeFocus
|
||||
}
|
||||
}
|
||||
component ItemKey:Rectangle{
|
||||
id:item_key_control
|
||||
property string text : ""
|
||||
color:FluTheme.primaryColor
|
||||
width: Math.max(item_text.implicitWidth+12,28)
|
||||
height: Math.max(item_text.implicitHeight,28)
|
||||
radius: 4
|
||||
Text{
|
||||
id:item_text
|
||||
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||
font.pixelSize: 13
|
||||
text: item_key_control.text
|
||||
anchors.centerIn: parent
|
||||
Component{
|
||||
id:com_item_key
|
||||
Rectangle{
|
||||
id:item_key_control
|
||||
color:FluTheme.primaryColor
|
||||
width: Math.max(item_text.implicitWidth+12,28)
|
||||
height: Math.max(item_text.implicitHeight,28)
|
||||
radius: 4
|
||||
Text{
|
||||
id:item_text
|
||||
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||
font.pixelSize: 13
|
||||
text: keyText
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
}
|
||||
Row{
|
||||
@ -144,8 +146,9 @@ FluIconButton {
|
||||
anchors.centerIn: parent
|
||||
Repeater{
|
||||
model: control.current
|
||||
delegate: ItemKey{
|
||||
text: modelData
|
||||
delegate: Loader{
|
||||
property var keyText: modelData
|
||||
sourceComponent: com_item_key
|
||||
}
|
||||
}
|
||||
Item{
|
||||
@ -217,8 +220,9 @@ FluIconButton {
|
||||
anchors.centerIn: parent
|
||||
Repeater{
|
||||
model: content_dialog.keysModel
|
||||
delegate: ItemKey{
|
||||
text: modelData
|
||||
delegate: Loader{
|
||||
property var keyText: modelData
|
||||
sourceComponent: com_item_key
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user