Ubuntu.Components.ScrollView

ScrollView is a scrollable view that features scrollbars and scrolling via keyboard keys. More...

Properties

• contentItem : Item
• flickableItem : Item
• horizontalScrollbar : Scrollbar
• verticalScrollbar : Scrollbar
• viewport : Item

Detailed Description

ScrollView is the recommended component to use in the implementation of scrollable content. It features scrollbars and handles keyboard input. Old applications that implemented scrollable views directly using the Scrollbar component should migrate to ScrollView, to ensure the UX is ready for convergent devices and is consistent with the rest of the platform.

ScrollView wraps Scrollbar(s) in a view, and provides additional features such as:

• - Keyboard navigation and focus handling, for a complete convergent experience.
• - Automatic position handling of vertical and horizontal scrollbars, preventing them from overlapping one another when both on screen.

Adding scrollbars and keyboard input handling to a QML item is as simple as wrapping that item in a ScrollView, as shown in the following example:

import QtQuick 2.4
import Ubuntu.Components 1.3
ScrollView {
width: units.gu(40)
height: units.gu(30)
Rectangle {
width: units.gu(140)
height: units.gu(40)
gradient: Gradient {
GradientStop { position: 0.0; color: "lightsteelblue" }
GradientStop { position: 1.0; color: "blue" }
}
}
}

NOTE: the items that are wrapped in the ScrollView are reparanted to viewport.

Property Documentation

The contentItem of the ScrollView. This is set by the user. Note that the definition of contentItem is somewhat different to that of a Flickable, where the contentItem is implicitly created.

The flickableItem of the ScrollView. If the contentItem provided to the ScrollView is a Flickable, that will be the flickableItem. Otherwise ScrollView will create a Flickable which will hold the items provided as children.

This property holds the horizontal scrollbar used in the ScrollView. It provides access to the scrollbar thus making it possible to change its properties or completely replace it with a custom Scrollbar object.

This property defaults to an instance of Scrollbar.

NOTE: some Scrollbar properties are already handled by ScrollView, and their value should hence not be overridden. These properties are:

• anchors margins, such as anchors.topMargin etc.
• the parent Item
• Scrollbar::flickableItem

This property holds the vertical scrollbar used in the ScrollView. It provides access to the scrollbar thus making it possible to change its properties or completely replace it with a custom Scrollbar object.

This property defaults to an instance of Scrollbar.

NOTE: some Scrollbar properties are already handled by ScrollView, and their value should hence not be overridden. These properties are:

• anchors margins, such as anchors.topMargin etc.
• the parent Item
• Scrollbar::flickableItem

This property holds the viewport Item. The children of the ScrollView element are reparented to this item to make sure the scrollbars are correctly positioned and the items are clipped at their boundaries.