Qt Quick Components

ListView overview: Qt Quick components for Symbian

The base element for a list view is the standard ListView element. The Qt Quick components for Symbian provide some extra elements for constructing lists.

  • The ListItem element can be used to define delegates that are templates for displaying the model data on screen.
  • ListHeading elements can be used to add a header for a list or for section headers within the list.
  • ListItemText elements allow you to put themed texts into a ListItem or a ListHeading.

Note: On MeeGo devices there is just the ListView element so, if you want anything special for your MeeGo application, you need to implement it yourself.

Creating a listview

The following code shows how to create a list view with several items. The image below shows the result.

 import Qt 4.7
 import com.nokia.symbian 1.0

 Item {
     id: root

     ListView {
         id: listView
         anchors.fill: parent
         focus: true
         clip: true
         model: listModel
         delegate: listDelegate
     }

     Component {
         id: listDelegate

         ListItem {
             id: listItem

             Column {
                 anchors.fill: listItem.padding

                 ListItemText {
                     mode: listItem.mode
                     role: "Title"
                     text: name // Title text from model
                     width: parent.width
                 }

                 ListItemText {
                     mode: listItem.mode
                     role: "SubTitle"
                     text: description // SubTitle text from model
                     width: parent.width
                 }
             }
         onClicked: console.log("ListItem clicked")
         onPressAndHold: console.log("ListItem press-and-hold")
         }
     }

     ListModel {
         id: listModel
         ListElement {
             name: "Item 1"
             description: "Basic item 1"
         }
         ListElement {
             name: "Item 2"
             description: "Basic item 2"
         }
         ListElement {
             name: "Item 3"
             description: "Basic item 3"
         }
         ListElement {
             name: "Item 4"
             description: "Basic item 4"
         }
         ListElement {
             name: "Item 5"
             description: "Basic item 5"
         }
     }
 }

Code examples