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
  }

The result will look like this:

Please note the right scroll indicator.

Polishing

When you add these 2 lines

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