Touch Input

The application delivers touch events by calling the dispatch_touch_event function of the generated code.[sls.input.invocation]

Model

A touch event carries a position in the coordinate system of rendering: the origin is the top-left corner of the window, x grows to the right, y grows downwards, and one unit is one pixel.[sls.input.model]

A finger touching the display produces a press, and lifting off produces a release: the two variants of slint_sc::TouchEvent, each carrying a slint_sc::Point.[sls.input.events]

Hit Testing

A TouchArea is hit by a position that lies within its geometry: at or after its x and y, and before its x + width and y + height.[sls.input.hit]

The geometry is the one the TouchArea has when the event is dispatched, so moving or resizing it takes effect on the next event.[sls.input.hit.current]

A TouchArea isn’t clipped to its parent, so it’s hit outside its parent’s geometry just as it paints there.[sls.input.hit.no-parent-clip]

Where more than one TouchArea is hit, only the topmost one counts: the one that comes last in the painting order.[sls.input.hit.topmost]

Clicking

A press is remembered by the TouchArea it hits, and by no other element.[sls.input.press]

A release invokes the clicked callback of the TouchArea that remembers the press, if the release position hits that same TouchArea.[sls.input.click]

A release that hits no TouchArea, or one other than the TouchArea that remembers the press, invokes nothing.[sls.input.click.mismatch]

A press replaces what an earlier press left remembered, and a release clears it, so a release with no press before it invokes nothing.[sls.input.press.replace]

export component Example inherits Window {
    background: #d0d8e8;
    callback confirmed;
    Rectangle {
        x: 20px;
        y: 20px;
        width: 120px;
        height: 40px;
        background: #2a6e3f;
        // No geometry of its own, so it covers the rectangle
        TouchArea {
            clicked => { root.confirmed(); }
        }
    }
}

slint