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. Thanks for all your past and future contributions.

SectionScoller Component For MeeGo-Harmattan

From 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 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.
32 page views in the last 30 days.