Qt Quick Components

ScrollBar

Symbian: Adds a visual indication of the position and interaction of a Flickable item's contents with relation to its viewport More...

  • List of all members, including inherited members
  • Properties

    Methods

    Detailed Description

    ScrollBar can be used with Flickable items as well as items derived from it, such as ListView and GridView items. ScrollBar should be a sibling of the Flickable item it is attached to. Because ScrollBar is not a child of Flickable, it has to be, unlike ScrollDecorator, explicitly anchored to Flickable. This enables also vertical ScrollBar anchoring for right-to-left (R2L) layouts/languages. ScrollBar does not contain any visible content by default.

    Using ScrollBar with ListView

     Item {
         x: 10
         width: 400
         anchors.top: parent.top
         anchors.bottom: parent.bottom
    
         ListView {
             id: list
             anchors.fill: parent
             ...
         }
    
         ScrollBar {
             flickableItem: list
             anchors { right: list.right; top: list.top }
         }
     }

    Using a right-to-left vertical ScrollBar with ListView

     Item {
         x: 10
         width: 400
         anchors.top: parent.top
         anchors.bottom: parent.bottom
    
         ListView {
             id: list
             anchors.fill: parent
             ...
         }
    
         ScrollBar {
             flickableItem: list
             anchors { left: list.left; top: list.top }
         }
     }

    Using a horizontal ScrollBar with GridView

     Item {
         x: 10
         width: 400
         anchors.top: parent.top
         anchors.bottom: parent.bottom
    
         GridView {
             id: grid
             anchors.fill: parent
             ...
         }
    
         ScrollBar {
             flickableItem: grid
             orientation: Qt.Horizontal
             anchors { left: grid.left; bottom: grid.bottom }
         }
     }

    Using a vertical indicative ScrollBar with a Flickable item that has key navigation support

     Item {
         x: 10
         width: 400
         anchors.top: parent.top
         anchors.bottom: parent.bottom
    
         Flickable {
             id: flickableArea
             anchors.fill: parent
             ...
         }
    
         ScrollBar {
             flickableItem: flickableArea
             interactive: false
             focus: true // to activate key navigation support
             anchors { right: flickableArea.right; top: flickableArea.top }
         }
     }

    See also Flickable, GridView, ListView, and ScrollDecorator.

    Property Documentation

    flickableItem : Flickable

    Flickable to be indicated or interacted with.

    If the value is not set, the scroll bar is not shown. The default value of the property is null.


    focus : bool

    If focus is true , the flickableItem content can be moved by navigation keys when available Up,Down,Left,Right depending on orientation

    If focus is false , the flickableItem content cannot be moved by navigation keys when available Up,Down,Left,Right depending on orientation

    Especially with combination of ListView and Vertical ScrollBar navigation (Up,Down keys), it is not likely feasible to set this property true to make list's own navigation working as expected.

    See also Item::focus, interactive, ListView, and GridView.


    interactive : bool

    If interactive is true , the user can move the flickableItem content by touching and dragging the scroll bar handle. If interactive is false, the user can not do like this. Furthermore, if interactive is false, the scroll bar is indicative, that is, similar to ScrollDecorator. Setting the interactive to false does not affect the key navigation support of ScrollBar that can be defined with Item::focus.

    The property value is true by default.


    orientation : int

    The orientation of the scroll bar, either vertical Qt.Vertical, or horizontal Qt.Horizontal. The default value is Qt.Vertical.


    pageSize : double

    Deprecated.

    Instead, use Flickable.visibleArea.heightRatio or Flickable.visibleArea.widthRatio

    Shown visible pageSize ratio of Flickable depending on orientation. The value is between 0 and 1.0.


    policy : int

    When the scroll bar is shown depends on the scroll bar's policy. A scroll bar can have the following policies:

    • Symbian.ScrollBarWhenScrolling: Scroll bar is shown when the user scrolls a Flickable or drags and starts hideout. This policy inherits the Symbian.ScrollBarWhenNeeded policy.
    • Symbian.ScrollBarWhenNeeded - Scroll bar is shown when the content of flickableItem does not fit in the screen.

    The property value is Symbian.ScrollBarWhenScrolling by default.

    See also flash().


    position : double

    Deprecated.

    Instead, use Flickable.visibleArea.xPosition or Flickable.visibleArea.yPosition

    The position of the scroll bar's handle in relation to ContentY or ContentX value of Flickable depending on screen the orientation. The value is between 0 and 1.0.


    Method Documentation

    ScrollBar::flash ()

    Shows and then hides the scroll bar indicating to the user that there is scrollable content available in flickableItem. This method is most applicable when the policy is Symbian.ScrollBarWhenScrolling and the scrollbar is already hidden.