SectionScoller Component For MeeGo-Harmattan

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to use to understand the new SectionScroller Qt Quick component for MeeGo-Harmattan

Article Metadata
Tested with
Devices(s): N950
Platform(s): MeeGo Harmattan
Keywords: Qt Quick Component for MeeGo Harmattan
Created: gaba88 (30 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)



This article will explain the how to use SectionScroller Qt Quick Component. SectionScroller in a very simple but again very useful QML component which helps developer to show long list which needs to be grouped into different section.

For Example if developer needs to show contacts list by sorting the the whole list alphabetically, then SectionScroller will be the most appropriate component to use.

Usage and Implementation

Using SectionScroller Component is very easy, SectionScroller has the listView component and developer need to bind their actual listview with that property.

Apart from that arranging the model is very important in Making a SectionScroller, while implementing the model for a SectionScroller developer needs to categorize the model too in the same way they want to show the model in SectionScroller listview.

And then simply they need to implement the header delegate which will wind up the SectionScroller implementation.

Below mentioned source code and screenshots will make the things more clear.

Code Snippet

import QtQuick 1.1 
import com.nokia.meego 1.0
Page {
tools: commonTools
ListElement{name:"800"; brand:"Maruti"}
ListElement{name:"A Star"; brand:"Maruti"}
ListElement{name:"WagnorR"; brand:"Maruti"}
ListElement{name:"Alto"; brand:"Maruti"}
ListElement{name:"Omni"; brand:"Maruti"}
ListElement{name:"Zen Estilo"; brand:"Maruti"}
ListElement{name:"Indica"; brand:"Tata"}
ListElement{name:"Indigo"; brand:"Tata"}
ListElement{name:"Sumo Grand"; brand:"Tata"}
ListElement{name:"Accent"; brand:"Hyundai"}
ListElement{name:"Santro"; brand:"Hyundai"}
ListElement{name:"i10"; brand:"Hyundai"}
ListElement{name:"i20"; brand:"Hyundai"}
ListElement{name:"i30"; brand:"Hyundai"}
ListElement{name:"Sonata"; brand:"Hyundai"}
ListElement{name:"Jazz"; brand:"Honda"}
ListElement{name:"Brio"; brand:"Honda"}
ListElement{name:"Honda City"; brand:"Honda"}
ListElement{name:"Honda Accord"; brand:"Honda"}
ListElement{name:"Honda Civic"; brand:"Honda"}
anchors.fill: parent
delegate: Text{
font.pointSize: 30
section {
criteria: ViewSection.FullString
delegate: Rectangle{
width: list.width; height: 40
color: "lightblue"
Text {
font.pointSize: 24
text: section
anchors.horizontalCenter: parent.horizontalCenter
listView: list


Meego sectionscroller 01.png Meego sectionscroller-02.png

This page was last modified on 13 June 2012, at 10:58.
24 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.