Skip to content

Flickable (and ScrollView): Add a property to prevent delaying press events #9521

@eminfedar

Description

@eminfedar

Currently, the Flickable and anything using it will delay forwarding the press event to their children by 100ms to avoid a "flicking" effect of the pressed state when scrolling.

We should add a property on the Flickable to disable this delay.

Original Bug Description

TouchArea.pressed property is working laggy. It can detect click events correctly with quick touchs, but in order to make pressed flag true, I have to touch and wait longer.

It should work instantly when I first touched the screen and button color should change.

Here is the GIF from video:

Image

Here is the Desktop version, works properly and the button background color changes everytime I press the mouse down:

Image

Reproducible Code (if applicable)

// Custom Button Component
export component Button inherits Rectangle {
    in property <bool> active: false;
    in property <image> icon <=> img.source;
    in property <string> text <=> label.text;
    out property <bool> pressed: touch.pressed;
    in property <bool> opaque: true;

    callback clicked;

    preferred-width: label.width + 27px;
    preferred-height: label.height + 5px;

    touch := TouchArea {
        clicked => {
            root.clicked()
        }
    }

    property <color> background-color: active ? Palette.primary-accent-color.brighter(0.10) : Palette.button-color;
    background: opaque ? (pressed ? background-color.darker(0.30) : background-color) : (pressed ? background-color.transparentize(0.85) : background-color.transparentize(0.65));

    label := Text {
        vertical-alignment: center;
        horizontal-alignment: center;
        color: active ? Palette.primary-accent-text-color : Palette.text-color;
        font-size: Palette.font-size;
    }

    img := Image {
        colorize: Palette.text-color;
    }
}

// Used the button in another file like this:

                property <int> count;

                Button {
                    text: "Clicked: " + count;
                    height: 200px;
                    clicked => {
                        count = count + 1;
                    }
                }

Environment Details

  • Slint Version: 1.13.1
  • Platform/OS: Android 15
  • Programming Language: Rust + Slint
  • Backend/Renderer: Skia + Vulkan

Product Impact

I am building an Android app with Slint.

This UI Feels laggy and inresponsive and it is bad for user experience.

Metadata

Metadata

Assignees

No one assigned

    Labels

    a:builtin elementsThe runtime data structures related to the items (mO,bT)

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions