51 lines
1.3 KiB
QML
51 lines
1.3 KiB
QML
// BusyIndicator.qml
|
||
import QtQuick 2.15
|
||
|
||
Item {
|
||
id: root
|
||
|
||
// 自定义属性
|
||
property color color: "#2196F3" // 指示器颜色
|
||
property real size: 48 // 组件大小
|
||
property real strokeWidth: size/10 // 线条宽度
|
||
property int duration: 1000 // 旋转周期（毫秒）
|
||
|
||
implicitWidth: size
|
||
implicitHeight: size
|
||
|
||
Canvas {
|
||
id: canvas
|
||
anchors.fill: parent
|
||
antialiasing: true
|
||
|
||
onPaint: {
|
||
var ctx = getContext("2d")
|
||
ctx.clearRect(0, 0, width, height)
|
||
|
||
// 绘制圆弧
|
||
ctx.beginPath()
|
||
ctx.strokeStyle = root.color
|
||
ctx.lineWidth = strokeWidth
|
||
ctx.arc(width/2, height/2,
|
||
(Math.min(width, height) - strokeWidth)/2,
|
||
-Math.PI/2, // 起始角度（顶部）
|
||
Math.PI/2, // 结束角度（90度缺口）
|
||
false)
|
||
ctx.stroke()
|
||
}
|
||
}
|
||
|
||
RotationAnimator {
|
||
target: canvas
|
||
running: true
|
||
loops: Animation.Infinite
|
||
from: 0
|
||
to: 360
|
||
duration: root.duration
|
||
}
|
||
|
||
// 自动重新绘制当属性变化时
|
||
onColorChanged: canvas.requestPaint()
|
||
onSizeChanged: canvas.requestPaint()
|
||
}
|