117 lines
3.4 KiB
QML
117 lines
3.4 KiB
QML
import QtQuick
|
|
import QtQuick.Controls
|
|
|
|
Item{
|
|
property var _index: 0
|
|
property var name: ""
|
|
property var _state: "0"
|
|
property var _active: "1"
|
|
|
|
width: 54
|
|
height: width
|
|
property real progress: 0.0 // 进度，范围从 0 到 1
|
|
onProgressChanged: {
|
|
canvas.requestPaint()
|
|
wCanvas.requestPaint()
|
|
}
|
|
|
|
Canvas {
|
|
id: wCanvas
|
|
visible: _state == "1"
|
|
renderTarget: Canvas.Image
|
|
antialiasing: true
|
|
width: 72
|
|
height: 72
|
|
anchors.centerIn: parent
|
|
onPaint: {
|
|
var ctx = getContext("2d")
|
|
var dpr = Qt.platform.os === "windows" ? Qt.platform.pixelRatio : 1
|
|
ctx.scale(dpr, dpr)
|
|
if(progress == 0)
|
|
ctx.clearRect(0, 0, wCanvas.width, wCanvas.width)
|
|
var centerX = wCanvas.width / 2
|
|
var centerY = wCanvas.height / 2
|
|
var radius = Math.min(centerX, centerY) * 0.8
|
|
|
|
// 绘制进度扇形
|
|
ctx.beginPath()
|
|
ctx.moveTo(centerX, centerY)
|
|
ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + 2 * Math.PI * progress)
|
|
ctx.lineTo(centerX, centerY)
|
|
ctx.fillStyle = "#00F0FF"
|
|
ctx.fill()
|
|
}
|
|
}
|
|
|
|
Rectangle{
|
|
width: 50
|
|
height: width
|
|
radius: 27
|
|
anchors.centerIn: parent
|
|
Rectangle{
|
|
width: 46
|
|
height: 46
|
|
radius: 23
|
|
anchors.centerIn: parent
|
|
color: "#98C9FB"
|
|
}
|
|
Canvas {
|
|
id: canvas
|
|
visible: _state != "0"
|
|
renderTarget: Canvas.Image
|
|
antialiasing: true
|
|
width: 54
|
|
height: 54
|
|
anchors.centerIn: parent
|
|
onPaint: {
|
|
var ctx = getContext("2d")
|
|
var dpr = Qt.platform.os === "windows" ? Qt.platform.pixelRatio : 1
|
|
ctx.scale(dpr, dpr)
|
|
if(progress == 0)
|
|
ctx.clearRect(0, 0, canvas.width, canvas.width)
|
|
var centerX = canvas.width / 2
|
|
var centerY = canvas.height / 2
|
|
var radius = Math.min(centerX, centerY) * 0.8
|
|
|
|
// 绘制进度扇形
|
|
ctx.beginPath()
|
|
ctx.moveTo(centerX, centerY)
|
|
ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + 2 * Math.PI * progress)
|
|
ctx.lineTo(centerX, centerY)
|
|
ctx.fillStyle = "#007EFF"
|
|
ctx.fill()
|
|
}
|
|
}
|
|
|
|
Rectangle{
|
|
width: 46
|
|
height: width
|
|
anchors.centerIn: parent
|
|
radius: 23
|
|
color: "#BFBFBF"
|
|
visible: _active == "0"
|
|
}
|
|
Text{
|
|
text: (_index+1) + ""
|
|
color: "white"
|
|
font.pixelSize: 20
|
|
anchors.centerIn: parent
|
|
}
|
|
}
|
|
|
|
|
|
QxText{
|
|
text: name
|
|
font.pixelSize: 16
|
|
color: skLayout.currentIndex == _index ? "#007EFF" : "#BFBFBF"
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.top: parent.bottom
|
|
}
|
|
|
|
MouseArea{
|
|
anchors.fill: parent
|
|
onClicked: {
|
|
skLayout.currentIndex = _index
|
|
}
|
|
}
|
|
} |