Hardware Key Navigation on Symbian Lists

The Symbian-specific ListItem component has inbuilt support for handling 'up' and 'down' hardware keys. When the ListView has focus, the 'up' key will decrement the current index. Similarly, the 'down' key will increment the current index.

You can set the ListView component to have focus using Item::ForceActiveFocus(), for example, as follows:

 ListView {
     id: listView

     Component.onCompleted: {
         listView.forceActiveFocus()
     }

If you want to use other hardware keys, the Keys property of the ListItem provides a mechanism for doing so. You can handle hardware key presses with the Keys.onPressed() and Keys.onReleased() handlers.

The code snippet below illustrates how the ListView delegate deletes a list item when the user presses the backspace key.

 Component {
     id: listDelegate

     ListItem {
         id: listItem

         Keys.onPressed: {
             if (event.key == Qt.Key_Backspace) {
                 if (listView.currentIndex >= 0)
                     listView.model.remove(listView.currentIndex)
             }
         }
     }
 }

Selecting a Control Inside a ListItem Component

Sometimes it is necessary to select a control inside the ListItem. The following example illustrates how to extend the ListItem component's functionality to handle 'left' and 'right' keys to select a control.

     Component {
         id: listDelegate

         ListItem {
             id: listItem

             Row {
                 width: parent.width
                 anchors.fill: parent.paddingItem

                 ListItemText {
                     mode: listItem.mode
                     role: "Title"
                     text: name // Title text is from the 'name' property in the model item (ListElement)
                     width: parent.width - (button1.width + button2.width)
                 }
                 Button {
                     id : button1
                     text: "Reply"
                     checked: activeFocus
                 }
                 Button {
                     id : button2
                     text: "Delete"
                     checked: activeFocus
                     onClicked: listView.model.remove(listView.currentIndex)
                 }
             }
         KeyNavigation.right: button2
         KeyNavigation.left: button1
         }
     }