Qt World Summit: Register Today!

rectangular DelayButton

  • is possible to make delay button rectangular whitout make a custom one? Not see style for .... but maybe there are some trik for make it. I appreciate any suggest.


  • Try this;

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    Window {
        visible: true
        width: 320
        height: 240
        title: qsTr("Rectangular button")
        DelayButton {
            delay: 2000
            text: "Button"
            anchors.centerIn: parent

  • ok thanks ... sorry but i have active import QtQuick.Extras 1.4 in my file ..... so only round DelayButton .... but if cancel these module all works ....

    Other things not undestand how is possible to change color and backgroundcolor of delay button, for example yellow and red instead of grey and darkgray as standard style.


  • @LeLev I see but need linear delaybutton shadow and not circular ... if try to use ctx.line(x,x,x,x,x,x) .... I receive an error for inexistent draw function .... and not find a page with permitted draw function ...


  • @gfxx I try with these demo code but with no success ...

            DelayButton {
                id: delayPress
                width: 100
                height: 50
                display: AbstractButton.TextOnly
                delay: 3000
                font.bold: true
                anchors.top: parent.top
                anchors.topMargin: 0
                checkable: true
                anchors.horizontalCenter: parent.horizontalCenter
                opacity: delayPress.enabled? 1 : 0.3
                visible: true
                text: "Delay\nButton"
                    contentItem: Text {
                        text: delayPress.text
                        font: delayPress.font
                        opacity: enabled ? 1.0 : 0.3
                        color: "white"
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        elide: Text.ElideRight
                background: Rectangle {
                    implicitWidth: delayPress.width
                    implicitHeight: delayPress.height
                    opacity: enabled ? 1 : 0.3
                    color: delayPress.down ? "#17a81a" : "#21be2b"
                    //border.color: "#2b6016"
                    //border.width: 1
                    antialiasing: true
                    radius: 2
                    anchors.centerIn: parent
                    Canvas {
                        id: canvas
                        anchors.fill: parent
                        Connections {
                            target: delayPress
                            onProgressChanged: canvas.requestPaint()
                        onPaint: {
                            var ctx = getContext("2d")
                            ctx.clearRect(0, 0, delayPress.width, delayPress.height)
                            ctx.strokeStyle = "red"
                            var startPoint = 0
                            var endPoint = startPoint + delayPress.progress
                            ctx.fillRect(startPoint, delayPress.height, endPoint, delayPress.height)

    some suggest?

  • @gfxx

    var endPoint = startPoint + delayPress.progress

    these row is wrong, because progress go from 0 to 1 so you need to multiply the variable "progress" by the length of the desired rectangle .... all this goes great.

    Thanks at all

Log in to reply