Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

DelayButtonStyle example for Extras 1.4 version of DelayButton?



  • 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



  • 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()
                        }
                    }
                }
            }
        }


  • @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!


Log in to reply