Displaying an Image with a scroll indicator

An Image element displayed in a Flickable element can be scrolled in the Flickable’s viewport. To indicate the position the user is currently looking at we will develop a simple scroll indicator.

First of all: “What is a Flickable element?”. It’s an element, which surface can be flipped. This is similar like a scroll area. You display content, which is bigger then the element itself. The viewport than shows the content only partially. To move the viewport you can flip the surface.

import Qt 4.6

Rectangle {
  id: container
  width: 200; height: 200;
  Flickable {
    id: flickable
    anchors.fill: parent;
    viewportWidth: image.width; viewportHeight: image.height
    Image { id: image; source: "qt_architecture.png" }
  // extension

The image can be any bigger image, which is available. This will give you an image viewer, where you can flip the image in the desired direction.

This is already pretty cool. What you would like to have additional is an indicator, which area of the image you are currently looking at: A scroll bar.

The Scrollbar

import Qt 4.6

Rectangle { // background
    id: container
    color: white;

    property var flickableArea

    Rectangle { // viewport indicator
      y: flickableArea.visibleArea.yPosition * container.height
      width: parent.width
      height: flickableArea.visibleArea.heightRatio * container.height
        color: "black"
        opacity: 0.7

The scroll bar in this case is a white rectangle which will be painted on the right of the visible image area later. The white-rectangle has an inner rectangle which indicates the current visible area.

Using the Scrollbar

We append to our previous flickable code where “extension” is marked the following:

  ScrollBar {
    id: scrollBar
    anchors.right: flickable.right; y: flickable.y
    width: 8; height: flickable.height
    flickableArea: flickable

This adds the scrollbar to the right edge of the flickable with a width of 8 along the whole height.

The result will look like this:

Please note the right scroll indicator.


When you add these 2 lines

    opacity: flickableArea.moving? .7 : 0;
    opacity: Behavior { NumberAnimation { duration: 400 } }

to the scrollbar component file, it will make the scrollbar invisible if the image is resting and make the scroll indicator to appear smooth. Please note that the 1st opacity statement gives the default value and the 2nd the behavior.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s