Solved 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!