Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Implementing horizontally scrolling view with QML Flickable

From Wiki
Jump to: navigation, search

This code snippet demonstrates how to use the Flickable QML element to implement a horizontally scrolling view.

Article Metadata
Tested with
Devices(s): Nokia 900
Platform(s): S60 5th Edition
S60 5th Edition
Dependencies: Qt 4.7 or later
Keywords: QML, Flickable
Created: kratsan (23 Jun 2010)
Last edited: hamishwillee (17 Oct 2012)



The view has 20 vertical lines to visualise the flicking. The background colour is changed when the view is moved.

The code snippet is meant to be run with qmlviewer.


  • Qt 4.7 or higher is installed on your platform.



The contentWidth of Flickable is set as four times the width of background. The signal handlers onMovementStarted and onMovementEnded change the colour of background when the view is moved. The vertical lines are generated using the Row and Repeater QML elements.

import Qt 4.7
Rectangle {
id: background
width: 800; height: 480
Behavior on color { ColorAnimation { duration: 200 } }
color: "black"
Flickable {
id: flickable
anchors.fill: parent
contentWidth: flickable.width * 4; contentHeight: flickable.height
onMovementStarted: background.color = "#705050"
onMovementEnded: background.color = "black"
Row {
x: 50
spacing: flickable.contentWidth / repeater.model
Repeater {
id: repeater
model: 20
Rectangle {
width: 2; height: flickable.height; color: "white"
Text {
anchors.bottom: parent.bottom
x: -15; text: index + 1; color: "white"


The snippet demonstrated the using of the Flickable QML element. The application implemented a horizontally flicking view with vertical lines to visualise flicking. Also, the Flickable signal handlers onMovementStarted and onMovementEnded were used to change the background colour when the view was moved.

This page was last modified on 17 October 2012, at 22:16.
264 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.