Back to Doc.qt.io
Contact Us Blog Download Qt

C

Flickable QML Type

Provides a surface that can be "flicked". More...

Import Statement: import QtQuick
Since: Qt Quick Ultralite 1.0
Inherits:

Item

Inherited By:

ListView

Properties

Detailed Description

The Flickable item places its children on a surface that can be dragged and flicked, causing the view onto the child items to scroll. This behavior forms the basis of Items that are designed to show large numbers of child items, such as ListView and GridView.

In traditional user interfaces, views can be scrolled using standard controls, such as scroll bars and arrow buttons. In some situations, it is also possible to drag the view directly by pressing and holding a mouse button while moving the cursor. In touch-based user interfaces, this dragging action is often complemented with a flicking action, where scrolling continues after the user has stopped touching the view.

Flickable does not automatically clip its contents. If it is not used as a full-screen item, you should consider setting the clip property to true.

Example Usage

The following example shows a small view onto a large image in which the user can drag or flick the image in order to view different parts of it.

Flickable {
    width: 150; height: 100
    contentWidth: image.width; contentHeight: image.height

    Image { id: image; source: "qrc:/images/qtlogo.png" }
}

Property Documentation

boundsBehavior : enumeration

This property holds whether the surface may be dragged beyond the Flickable's boundaries, or overshoot the Flickable's boundaries when flicked.

The boundsBehavior can be one of:

  • Flickable.StopAtBounds - the contents can not be dragged beyond the boundary of the flickable, and flicks will not overshoot.
  • Flickable.DragOverBounds - the contents can be dragged beyond the boundary of the Flickable, but flicks will not overshoot.
  • Flickable.OvershootBounds - the contents can overshoot the boundary when flicked, but the content cannot be dragged beyond the boundary of the flickable.
  • Flickable.DragAndOvershootBounds (default) - the contents can be dragged beyond the boundary of the Flickable, and can overshoot the boundary when flicked.

contentHeight : int

Height of the content (the surface controlled by Flickable).


contentItem : Item*

The internal item that contains the Items to be moved in the Flickable.


contentWidth : int

Width of the content (the surface controlled by Flickable).


contentX : int

This properties holds the surface X coordinate currently at the left of the Flickable.


contentY : int

This properties holds the surface Y coordinate currently at the top of the Flickable.


flickableDirection : enumeration

This property determines which directions the view can be flicked.

  • Flickable.AutoFlickDirection (default) - allows flicking vertically if the contentHeight is not equal to the height of the Flickable. Allows flicking horizontally if the contentWidth is not equal to the width of the Flickable.
  • Flickable.AutoFlickIfNeeded - allows flicking vertically if the contentHeight is greater than the height of the Flickable. Allows flicking horizontally if the contentWidth is greater than to the width of the Flickable.
  • Flickable.HorizontalFlick - allows flicking horizontally.
  • Flickable.VerticalFlick - allows flicking vertically.
  • Flickable.HorizontalAndVerticalFlick - allows flicking in both directions.

interactive : bool

This property describes whether the user can interact with the Flickable. A user cannot drag or flick a Flickable that is not interactive.

By default, this property is true.

This property is useful for temporarily disabling flicking. This allows special interaction with Flickable's children; for example, you might want to freeze a flickable map while scrolling through a pop-up dialog that is a child of the Flickable.


maximumFlickVelocity : Item*

This property holds the maximum velocity that the user can flick the view in pixels/second.

The default value is platform dependent.


movingHorizontally : bool

This property describes whether the view is currently moving horizontally, due to the user either dragging or flicking the view.


movingVertically : bool

This property describes whether the view is currently moving vertically, due to the user either dragging or flicking the view.


visibleArea group

visibleArea.heightRatio : real

visibleArea.widthRatio : real

visibleArea.xPosition : real

visibleArea.yPosition : real

These properties describe the position and size of the currently viewed area. The size is defined as the percentage of the full view currently visible, scaled to 0.0 - 1.0. The page position is usually in the range 0.0 (beginning) to 1.0 minus size ratio (end), i.e. yPosition is in the range 0.0 to 1.0-heightRatio. However, it is possible for the contents to be dragged outside of the normal range, resulting in the page positions also being outside the normal range.

All values in this group are read-only. Use contentX, contentY, contentWidth and contentHeight for changes.


Available under certain Qt licenses.
Find out more.