Qt Quick - DelayButton理论

一、概述

DelayButton 是一个 check 按钮，在按钮被 check 并发出activated()信号之前包含了一个延迟。这种延迟可以防止意外按下按钮。很像长按加速的效果功能。

当前进度用一个介于0.0到1.0之间的十进制值表示。activation()触发所需的时间以毫秒为单位，可以通过delay属性来设置。
进度由按钮上的进度指示器指示。

二、简单使用

import QtQuick 2.14
import QtQuick.Layouts 1.0
import QtQuick.Controls 2.5
import QtQuick.Window 2.3

Window {
    
    
    width: 200
    height: 400
    
    
    Column {
    
    
        id: column

        anchors.fill: parent
        
        DelayButton
        {
    
    
            text:"长按加速"
            anchors.horizontalCenter: parent.horizontalCenter
            Layout.alignment: Qt.AlignCenter

        }
    }
}

三、定制化

DelayButton {
    
    
            id: control
            checked: true
            text: qsTr("Delay\nButton")
            
            Layout.alignment: Qt.AlignHCenter
            anchors.horizontalCenter: parent.horizontalCenter
            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 ? "#17a81a" : "#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()
                    }
                }
            }
}