DelayButtonStyle example for Extras 1.4 version of DelayButton?

Jake 0

Hi,
I'm new to QML and can't find an example of customizing the DelayButton found in:
https://doc.qt.io/qt-5/qml-qtquick-extras-delaybutton.html
(not the QtQuick.Controls 2.12 version, but the QtQuick.Extras 1.4 version which has no background or contentItem properties).

So anyone know how to setup and use extras version of the delay button? I like it's appearance a little better and I'd like a green ring, not red. Supposedly customization is done via DelayButtonStyle https://doc.qt.io/qt-5/qml-qtquick-controls-styles-delaybuttonstyle.html

Thanks in advance.
Jake

Shrinidhi Upadhyaya

Hi @Jake-0 , please have a look at the sample code:-

DelayButton {
        id: control

        height: 100
        width: 100
        text: qsTr("Custom Delay\nButton")

        style: DelayButtonStyle {

            label: Text {
                text: control.text
                color: "white"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }

            foreground: Rectangle {
                implicitWidth: 100
                implicitHeight: 100
                color: "orange"
                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 = "green"
                        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()
                    }
                }
            }
        }
    }

Jake 0

@SHRINIDHI-UPADHYAYA
Thank you for the code example! Since I am new to QML, this is very helpful and allows me to better understand how the DelayButtonStyle in QtQuick.Controls.Styles 1.4 is to be used with the DelayButton interface in QtQuick.Extras 1.4. (it can get a little confusing with the different versions of DelayButton).

Best!