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.
Image may be NSFW.
Clik here to view.
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:
Image may be NSFW.
Clik here to view.
Please note the right scroll indicator.
Polishing
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.
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
