ScrollIndicator QML Type

Vertical or horizontal non-interactive scroll indicator. More...

• List of all members, including inherited members

Properties

• active : bool
• horizontal : bool
• minimumSize : real
• orientation : enumeration
• position : real
• size : real
• vertical : bool
• visualPosition : real
• visualSize : real

Attached Properties

• horizontal : ScrollIndicator
• vertical : ScrollIndicator

Detailed Description

ScrollIndicator is a non-interactive indicator that indicates the current scroll position. A scroll indicator can be either vertical or horizontal, and can be attached to any Flickable, such as ListView and GridView.

 Flickable {
     // ...
     ScrollIndicator.vertical: ScrollIndicator { }
 }

Attaching ScrollIndicator to a Flickable

Note: When ScrollIndicator is attached vertically or horizontally to a Flickable, its geometry and the following properties are automatically set and updated as appropriate:

• orientation
• position
• size
• active

An attached ScrollIndicator re-parents itself to the target Flickable. A vertically attached ScrollIndicator resizes itself to the height of the Flickable, and positions itself to either side of it based on the layout direction. A horizontally attached ScrollIndicator resizes itself to the width of the Flickable, and positions itself to the bottom. The automatic geometry management can be disabled by specifying another parent for the attached ScrollIndicator. This can be useful, for example, if the ScrollIndicator should be placed outside a clipping Flickable. This is demonstrated by the following example:

 Flickable {
     id: flickable
     clip: true
     // ...
     ScrollIndicator.vertical: ScrollIndicator {
         parent: flickable.parent
         anchors.top: flickable.top
         anchors.left: flickable.right
         anchors.bottom: flickable.bottom
     }
 }

Binding the Active State of Horizontal and Vertical Scroll Indicators

Horizontal and vertical scroll indicators do not share the active state with each other by default. In order to keep both indicators visible whilst scrolling to either direction, establish a two-way binding between the active states as presented by the following example:

 Flickable {
     anchors.fill: parent

     contentWidth: parent.width * 2
     contentHeight: parent.height * 2

     ScrollIndicator.horizontal: ScrollIndicator { id: hbar; active: vbar.active }
     ScrollIndicator.vertical: ScrollIndicator { id: vbar; active: hbar.active }
 }

Non-attached Scroll Indicators

It is possible to create an instance of ScrollIndicator without using the attached property API. This is useful when the behavior of the attached scoll indicator is not sufficient or a Flickable is not in use. In the following example, horizontal and vertical scroll indicators are used to indicate how far the user has scrolled over the text (using MouseArea instead of Flickable):

 Rectangle {
     id: frame
     clip: true
     width: 160
     height: 160
     border.color: "black"
     anchors.centerIn: parent

     Text {
         id: content
         text: "ABC"
         font.pixelSize: 169

         MouseArea {
             id: mouseArea
             drag.target: content
             drag.minimumX: frame.width - width
             drag.minimumY: frame.height - height
             drag.maximumX: 0
             drag.maximumY: 0
             anchors.fill: content
         }
     }

     ScrollIndicator {
         id: verticalIndicator
         active: mouseArea.pressed
         orientation: Qt.Vertical
         size: frame.height / content.height
         position: -content.y / content.height
         anchors { top: parent.top; right: parent.right; bottom: parent.bottom }
     }

     ScrollIndicator {
         id: horizontalIndicator
         active: mouseArea.pressed
         orientation: Qt.Horizontal
         size: frame.width / content.width
         position: -content.x / content.width
         anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
     }
 }

See also ScrollBar, Customizing ScrollIndicator, and Indicator Controls.

Property Documentation

Attached Property Documentation

 Flickable {
     contentWidth: 2000
     ScrollIndicator.horizontal: ScrollIndicator { }
 }

 Flickable {
     contentHeight: 2000
     ScrollIndicator.vertical: ScrollIndicator { }
 }