Flickable

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

    Flickable {
        viewport-height: 300px;
        Text {
            x:0;
            y: 150px;
            text: "This is some text that you have to scroll to see";
        }
    }
}

The Flickable is a low-level element that is the base for scrollable widgets, such as the ScrollView. When the viewport-width or the viewport-height is greater than the parent’s width or height respectively, the element becomes scrollable. Note that the Flickable doesn’t create a scrollbar. When unset, the viewport-width and viewport-height are calculated automatically based on the Flickable’s children. This isn’t the case when using a for loop to populate the elements. This is a bug tracked in issue #407 ↗. The maximum and preferred size of the Flickable are based on the viewport.

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

Pointer Event Interaction

If the Flickable’s area contains elements that use TouchArea to act on clicking, such as Button widgets, then the following algorithm is used to distinguish between the user’s intent of scrolling or interacting with TouchArea elements:

1. If the Flickable’s interactive property is false, all events are forwarded to elements underneath.
2. If a press event is received where the event’s coordinates interact with a TouchArea, the event is stored and any subsequent move and release events are handled as follows:
   1. If 100ms elapse without any events, the stored press event is delivered to the TouchArea.
   2. If a release event is received before 100ms have elapsed, the stored press event as well as the release event are immediately delivered to the TouchArea and the algorithm resets.
   3. Any move events received will start a flicking operation on the Flickable if all of the following conditions are met:
      1. The event is received before 500ms have elapsed since receiving the press event.
      2. The distance to the press event exceeds 8 logical pixels in an orientation in which we are allowed to move. If Flickable decides to flick, any press event sent previously to a TouchArea, is followed up by an exit event. During the phase of receiving move events, the flickable follows the coordinates.
3. If the interaction of press, move, and release events begins at coordinates that do not intersect with a TouchArea, then Flickable will flick immediately on pointer move events when the euclidean distance to the coordinates of the press event exceeds 8 logical pixels.

interactive

bool default: true

Flickable {
    interactive: false;
}

When true, the viewport can be scrolled by clicking on it and dragging it with the cursor.

viewport-width

length default: 0px

The total width of the scrollable element.

viewport-height

length default: 0px

The total height of the scrollable element.

viewport-x

length default: 0px

The position of the scrollable element relative to the Flickable. This is usually a negative value.

viewport-y

length default: 0px

The position of the scrollable element relative to the Flickable. This is usually a negative value.

Callbacks

flicked()

Invoked when viewport-x or viewport-y is changed by a user action (dragging, scrolling).