Implementing horizontally scrolling view with QML Flickable

Comments

(no comments yet)

Log in or Join to leave comments.

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

---

Compatibility

Platform(s): S60 5th Edition
Maemo

Dependencies: Qt 4.7 or later

---

Article

Keywords: QML, Flickable

Created: kratsan (23 Jun 2010)

Last edited: hamishwillee (18 Oct 2012)

Overview

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.

Preconditions

• Qt 4.7 or higher is installed on your platform.

Source

ui.qml

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"
                    }
                }
            }
        }
    }
}

Postconditions

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.