List Components for Symbian

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

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

Creating and Decorating a List

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.1

 Window {
     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.paddingItem

                 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

• Multi-Select Support for Symbian List Components
• Hardware Key Navigation on Symbian Lists