Skip to main content

TapGesture

A tap gesture is a "pointer down & up" within a small radius. It's typically used to build buttons or checkboxes.

modifier TapGesture
import { TapGesture, TapGestureEvent, Rectangle, Frame } from ui
import { random } from math

fun random_color() -> (Color) {
return Color(0xFF000000 | random(from: 0, to: 16777216))
}

component TappableBox {
color: Color = random_color()

Rectangle(color: self.color) with {
Frame(width: 50, height: 50)
TapGesture(fun (event: TapGestureEvent) {
self.color = random_color()
})
}
}

export var main: Component = TappableBox()

Constructors

(_ single)

_ single: (TapGestureEvent) -> ()

Called when a single tap (pointer down and up) occured.

(down:​up:single:double:​cancel)

down: (TapGestureEvent) -> ()

Called when the pointer down occurs.

up: (TapGestureEvent) -> ()

Called when the pointer up occurs.

single: (TapGestureEvent) -> ()

Called when a single tap (pointer down and up) occured.

When no double handler is provided every pointer up will trigger the single handler.

In case both single and double are provided, the single callback might occur on a timeout to allow distinguishing between a single or double tap.

down <timeout> up -> single tap
down up <timeout> -> single tap
down up down up -> double tap (single not called)
down up down <timeout> up -> double tap (single not called)
info

The timeout is the double click speed system setting of the user.

double: (TapGestureEvent) -> ()

Called when every second pointer down & up sequence completes within the allowed time and distance limit for a double tap.

cancel: () -> ()

Called when the tap was cancelled due to another gesture taking over.

Layout Behavior

None

TapGestureEvent

class TapGestureEvent

Properties

position: Point

The pointer position in the component's coordinate system.

See Point

frame: Rect

The component's bounding box during the event.

See Rect

modifiers: KeyboardModifiers

The keyboard modifiers that were active during the event. See KeyboardModifiers