TouchArea

Use TouchArea to control what happens when the region it covers is touched or interacted with using the mouse.

When not part of a layout, its width or height default to 100% of the parent element.

export component Example inherits Window {
    width: 200px;
    height: 100px;
    area := TouchArea {
        width: parent.width;
        height: parent.height;
        clicked => {
            rect2.background = #ff0;
        }
    }
    Rectangle {
        x:0;
        width: parent.width / 2;
        height: parent.height;
        background: area.pressed ? blue: red;
    }
    rect2 := Rectangle {
        x: parent.width / 2;
        width: parent.width / 2;
        height: parent.height;
    }
}

slint

Properties

enabled

bool default: true

When disabled, the TouchArea doesn’t recognize any touch or mouse events and they are passed through to elements underneath.

import { Button, CheckBox } from "std-widgets.slint";

export component Example inherits Window {
    width: 200px; height: 100px;

    VerticalLayout {
        Rectangle {
            Button {
                text: "Try to press me";
            }
            TouchArea {
                enabled: event-blocker.checked;
            }
        }
        event-blocker := CheckBox {
            text: "Block Access";
        }
    }
}

slint

Note

When enabled is set to false while the TouchArea is pressed, pointer-event will be invoked with PointerEventKind.Cancel, and the pressed and has-hover properties will be reset to false.

has-hover

bool (out) default: false

Set to true when the mouse is over the TouchArea area.

mouse-cursor

enum MouseCursor default: the first enum value

MouseCursor

This enum represents different types of mouse cursors. It’s a subset of the mouse cursors available in CSS. For details and pictograms see the MDN Documentation for cursor ↗. Depending on the backend and used OS unidirectional resize cursors may be replaced with bidirectional ones.

• default: The systems default cursor.
• none: No cursor is displayed.
• help: A cursor indicating help information.
• pointer: A pointing hand indicating a link.
• progress: The program is busy but can still be interacted with.
• wait: The program is busy.
• crosshair: A crosshair.
• text: A cursor indicating selectable text.
• alias: An alias or shortcut is being created.
• copy: A copy is being created.
• move: Something is to be moved.
• no-drop: Something can’t be dropped here.
• not-allowed: An action isn’t allowed
• grab: Something is grabbable.
• grabbing: Something is being grabbed.
• col-resize: Indicating that a column is resizable horizontally.
• row-resize: Indicating that a row is resizable vertically.
• n-resize: Unidirectional resize north.
• e-resize: Unidirectional resize east.
• s-resize: Unidirectional resize south.
• w-resize: Unidirectional resize west.
• ne-resize: Unidirectional resize north-east.
• nw-resize: Unidirectional resize north-west.
• se-resize: Unidirectional resize south-east.
• sw-resize: Unidirectional resize south-west.
• ew-resize: Bidirectional resize east-west.
• ns-resize: Bidirectional resize north-south.
• nesw-resize: Bidirectional resize north-east-south-west.
• nwse-resize: Bidirectional resize north-west-south-east.

The mouse cursor type when the mouse is hovering the TouchArea.

mouse-x

length (out) default: 0px

Set by the TouchArea to the position of the mouse within it.

mouse-y

length (out) default: 0px

Set by the TouchArea to the position of the mouse within it.

pressed-x

length (out) default: 0px

Set by the TouchArea to the position of the mouse at the moment it was last pressed.

pressed-y

length (out) default: 0px

Set by the TouchArea to the position of the mouse at the moment it was last pressed.

pressed

bool (out) default: false

Set to true by the TouchArea when the mouse is pressed over it.

Callbacks

clicked()

Invoked when clicked: A finger or the left mouse button is pressed, then released on this element.

double-clicked()

Invoked when double-clicked. The left mouse button is pressed and released twice on this element in a short period of time, or the same is done with a finger. The clicked() callbacks will be triggered before the double-clicked() callback is triggered.

moved()

The mouse or finger has been moved. This will only be called if the mouse is also pressed or the finger continues to touch the display. See also pointer-event(PointerEvent).

pointer-event(PointerEvent)

PointerEvent

Represents a Pointer event sent by the windowing system. This structure is passed to the pointer-event callback of the TouchArea element.

• button (PointerEventButton): The button that was pressed or released
• kind (PointerEventKind): The kind of the event
• modifiers (KeyboardModifiers): The keyboard modifiers pressed during the event

scroll-event(PointerScrollEvent) -> EventResult

Invoked when the mouse wheel was rotated or another scroll gesture was made. The PointerScrollEvent argument contains information about how much to scroll in what direction.

PointerScrollEvent

Represents a Pointer scroll (or wheel) event sent by the windowing system. This structure is passed to the scroll-event callback of the TouchArea element.

• delta_x (length): The amount of pixel in the horizontal direction
• delta_y (length): The amount of pixel in the vertical direction
• modifiers (KeyboardModifiers): The keyboard modifiers pressed during the event

The returned EventResultindicates whether to accept or ignore the event. Ignored events are forwarded to the parent element.

EventResult

This enum describes whether an event was rejected or accepted by an event handler.

• reject: The event is rejected by this event handler and may then be handled by the parent item
• accept: The event is accepted and won’t be processed further