import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
visible: true
width: 640
height: 480
title: qsTr("圆形延时按钮")
DelayButton {
id: control
checked: true
text: qsTr("延时动作")
x:200
y:30
width: 200
height: 400
//延时时间设置，5秒。默认的是3秒
delay:5000
contentItem: Text {
text: control.text
font: control.font
opacity: enabled ? 1.0 : 0.3
color: "white"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 100
implicitHeight: 100
opacity: enabled ? 1 : 0.3
color: control.down ? "red" : "#21be2b"
radius: size / 2
readonly property real size: Math.min(control.width, control.height)
width: size
height: size
anchors.centerIn: parent
Canvas {
id: canvas
anchors.fill: parent
Connections {
target: control
//完成后点击清除绘制进度
onProgressChanged:
{
canvas.requestPaint()
}
}
onPaint: {
var ctx = getContext("2d")
//清除
ctx.clearRect(0, 0, width, height)
ctx.strokeStyle = "white"
//进度条线宽
ctx.lineWidth = parent.size / 20
ctx.beginPath()
//起始点
var startAngle = Math.PI / 5 * 3
//结束点
var endAngle = startAngle + control.progress * Math.PI / 5 * 9
ctx.arc(width / 2, height / 2, width / 2 - ctx.lineWidth / 2 - 2, startAngle, endAngle)
ctx.stroke()
}
}
}
//延时结束时的信号槽
onActivated: {
//5秒后才能打印这句话
console.log("延时结束")
//事务处理
}
}
}
原文链接：https://blog.csdn.net/yao_hou/article/details/105911827