Qt/QML学习-DelayButton

QML学习

• DelayButton例程
• 视频讲解
• 代码

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("DelayButton")DelayButton {id: delayButtonx: 10y: 10delay: 1000text: "一键三连"onActivated: {logText.text = "已三连"}onPressed: {logText.text = ""}// 内容视图contentItem: Text {text: delayButton.textanchors.centerIn: delayButtonfont.pointSize: 30}// 背景视图background: Rectangle {color: "transparent"Canvas {anchors.fill: parentonPaint: {draw()}// 动画平滑function draw() {var ctx = getContext("2d")ctx.clearRect(0, 0, width, height)ctx.beginPath()ctx.moveTo(0, 0)drawRect(ctx)ctx.stroke()requestAnimationFrame(draw)}// 画边框function drawRect(ctx) {if (delayButton.progress < 0.25) {ctx.lineTo(width * (delayButton.progress / 0.25), 0)return} else {ctx.lineTo(width, 0)}if (delayButton.progress < 0.5) {ctx.lineTo(width, height * ((delayButton.progress - 0.25) / 0.25))return} else {ctx.lineTo(width, height)}if (delayButton.progress < 0.75) {ctx.lineTo(width * (1 - (delayButton.progress - 0.5) / 0.25), height)} else {ctx.lineTo(0, height)ctx.lineTo(0, height * (1 - (delayButton.progress - 0.75) / 0.25))}}}}}// 演示Text {id: logTextanchors.left: delayButton.rightanchors.verticalCenter: delayButton.verticalCenterleftPadding: 20font.pointSize: 30}
}

演示

• 视频讲解