CODEWITHSUNDEEP
c++qtqmldelayhighlight
CantThinkOfAnything
CantThinkOfAnything

Reputation: 1179

QML Rectangle button highlight delay

I have a list of buttons that i want to highlight separately when a user presses it until it is released.

The problem with this is that when you scroll through the list, the first button you touch will highlight even though u touched it for a millisecond. It does not look nice so i want to add a delay for the highlight animation to occur.

a little delay before the highlight animation happens would probably fix this cosmetic issue i presume.

How do i add a delay to a highlight animation?

I have been trying something like:

Rectangle {
    id: folderButton    
    property bool pressed: false
    signal clicked

    height: mainWindoww.height * 0.1
    width: parent.width
    color: pressed ? "lightgrey" : "white"

    function release() {
        autoRepeatClicks.stop()
        folderButton.pressed = false
    }

    SequentialAnimation on pressed {
        id: autoRepeatClicks
        running: false

        PropertyAction { target: folderButton; property: "pressed"; value: true }
        ScriptAction { script: folderButton.clicked() }
        PauseAnimation { duration: 1000 }

        SequentialAnimation {
            loops: Animation.Infinite
            ScriptAction { script: folderButton.clicked() }
            PauseAnimation { duration: 500 }
        }
    }

    MouseArea {
        anchors.fill: parent

        onPressed: autoRepeatClicks.start()
        onReleased: folderButton.release()
        onCanceled: folderButton.release()
    }
}

but it seems as if this code does not add any kind of time difference

Upvotes: 1

Views: 1259

Answers (2)

deW1
deW1

Reputation: 5660

You can use a Timer to achieve this. For instance, you can do:

Item {
    Timer {
        interval: 500;
        running: true;
        repeat: true
        onTriggered: time.text = Date().toString()
    }

    Text { id: time }
}

Upvotes: 1

Isaikin Roman
Isaikin Roman

Reputation: 58

If you just want to animate color property, try something like:

Behavior on color { ColorAnimation { duration: 1000 } }

Upvotes: 0

Related Questions