Qt Reference Documentation

Multi-Select Support for Symbian List Components

You can use a ListView to set up a list with items that can be individually selected. The code snippets below demonstrate how to create the following list:

Creating the List View

The following code snippet is a basic definition for a ListView. A ListView has a model property that defines the data to be displayed, and a delegate property that defines how the data should be displayed on the screen.

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

Creating the Data Model

The following code snippet defines a simple model for a multiselection list. It is implemented using a ListModel element and the items of the list are ListElements.

Note: Each item in the list must include a data item to store the selection state of that item. In this example it is called selected. The delegate then uses the selected value to display the state visually to the user.

     ListModel {
         id: listModel
         ListElement {
             name: "Item 1"
             description: "Selectable item 1"
             selected: true
         }
         ListElement {
             name: "Item 2"
             description: "Selectable item 2"
             selected: false
         }
         ListElement {
             name: "Item 3"
             description: "Selectable item 3"
             selected: true
         }
         ListElement {
             name: "Item 4"
             description: "Selectable item 4"
             selected: false
         }
         ListElement {
             name: "Item 5"
             description: "Selectable item 5"
             selected: true
         }
     }

Creating the ListItem Delegate

The final thing to do is to create the delegate. This defines how the data is displayed to the user and also passes information about data changes back to the model. Delegates are instantiated as needed by the system and can be destroyed at any time - even while scrolling the list - so it is not safe to store state information only in the delegate. You must make the delegate update the model when the state of a item changes. Then your state information does not disappear when the delegate item is destroyed.

The code snippet below defines a delegate with some texts and a check box. The ListView uses this delegate as a template to display the data for each item in the model onto the screen.

     Component {
         id: listDelegate

         ListItem {
             id: listItem

             // The texts to display
             Column {
                 anchors {
                     left:  listItem.paddingItem.left
                     top: listItem.paddingItem.top
                     bottom: listItem.paddingItem.bottom
                     right: checkbox.left
                 }

                 ListItemText {
                     mode: listItem.mode
                     role: "Title"
                     text: name // Title text is from the 'name' property in the model item (ListElement)
                     width: parent.width
                 }

                 ListItemText {
                     mode: listItem.mode
                     role: "SubTitle"
                     text: description // SubTitle text is from the 'description' property in the model item
                     width: parent.width
                 }
             }

             // The checkbox to display
             CheckBox {
                 id: checkbox
                 checked: selected  // Checked state is from the 'selected' property in the model item
                 anchors { right: listItem.paddingItem.right; verticalCenter: listItem.verticalCenter }
                 onClicked: listModel.set(index, { "selected": checkbox.checked })
             }
         }
     }