×
Namespaces

Variants
Actions

Implementing horizontally scrolling view with QML Flickable

From Nokia Developer 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
Compatibility
Platform(s): S60 5th Edition
Maemo
Symbian
S60 5th Edition
Dependencies: Qt 4.7 or later
Article
Keywords: QML, Flickable
Created: kratsan (23 Jun 2010)
Last edited: hamishwillee (18 Oct 2012)

Contents

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.

This page was last modified on 18 October 2012, at 01:16.
224 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.

×