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.

How to use ListView QML Element

From Wiki
Jump to: navigation, search
Article Metadata
Created: girishpadia (23 Mar 2011)
Last edited: hamishwillee (24 Jul 2012)

This article provides a basic overview of how to use the QML ListView element. More advanced articles exist; this is suitable for developers who are just getting started.


What you need ?

You need to download Qt SDK 1.1 beta version from here The Qt SDK 1.1 version is available as Online and Offline version for Windows, Linux and Mac Operating Systems. Download and install appropriate version.

Application Code

Once you install Qt SDK, you need to create a new project. To do this goto File->New File or Project... You will find a dialog box shown in following image. Choose Qt Quick Project and Qt Quick UI. Give appropriate name to your project e.g. "ListViewTest".

Article 14 image 1.PNG

You will see the "listViewTest.qml" with some code. Now right click on project and click "Add New...". You will see a dialog box. Select "QML" and click on "Choose..." button. Give it name "MyModel.QML". Leave this "MyModel.QML" file as it is. We will modify it later or you can paste code shown in the source code of "MyModel.QML" file below. Open the file listViewTest.QML and replace it's code with following code. I have described each line of the program with the necessary comments so the reader can understand it in better way.


// Importing QtQuick 1.0. This is required to use QtQuick code
import QtQuick 1.0
Rectangle {
//An id is assigned to ractangle
id: listViewTest
//The width and height is set for the rectangle.
width: 360; height: 640
//Color of Rectagale is given "pink"
color: "pink"
//Defining list view and its properties.
ListView {
id: mainListView
//Width and heigh is set to the width and hieght of parent element.
//Here it is the width of Rectangle element i.e 360 & 640 respectively.
height: parent.height
//Model is important. The model is given as "MyModel".
//This will refer to "MyModel.qml" file which we shall create ahead
model: MyModel {}
delegate: Text {
//The name and age are defined in MyModel.qml file.
//The following line will read "ListElement" from the MyModel.qml file
text: "The contributor of Month "+month + " / "+year+" was : <h2>"+com+"</h2><br>"
//Color of text is assigned as darkblue
color: "darkblue"


import QtQuick 1.0
// Defining ListModel
ListModel {
id: myListModelId
//ListElements are defined one by one.
//You can define ListElements as many as you wish.
// You must be careful while defining ListElement that each property of ListElement
// should be unique for all ListElements. Here you can see each ListElement have
// three properties i.e. year, month and com (Contributor of Month).
// If any of the property is not uniquely defined and used in ListModel then
// it's value will not be printed. Instead of value it will show 'undefined'
ListElement {
month: "January & February"
com: "razvanpetru"
ListElement {
month: "December"
com: "chintandave_er "
ListElement {
month: "October & November"
com: "flycarl"
ListElement {
month: "September"
com: "mavi85bmn"
ListElement {
month: "July"
com: "jimgilmour1"

Post Condition

Run Application and you will see the output as shown in following screenshot.

Article 16 image 1.JPG

More Reference Material

This page was last modified on 24 July 2012, at 01:50.
58 page views in the last 30 days.