Home · All Classes · All Functions · Overviews

QML KeyNavigation Element Reference

The KeyNavigation attached property supports key navigation by arrow keys. More...

Properties

Detailed Description

It is common in key-based UIs to use arrow keys to navigate between focussed items. The KeyNavigation property provides a convenient way of specifying which item will gain focus when an arrow key is pressed. The following example provides key navigation for a 2x2 grid of items.

 Grid {
     columns: 2
     width: 100; height: 100
     Rectangle {
         id: item1
         focus: true
         width: 50; height: 50
         color: focus ? "red" : "lightgray"
         KeyNavigation.right: item2
         KeyNavigation.down: item3
     }
     Rectangle {
         id: item2
         width: 50; height: 50
         color: focus ? "red" : "lightgray"
         KeyNavigation.left: item1
         KeyNavigation.down: item4
     }
     Rectangle {
         id: item3
         width: 50; height: 50
         color: focus ? "red" : "lightgray"
         KeyNavigation.right: item4
         KeyNavigation.up: item1
     }
     Rectangle {
         id: item4
         width: 50; height: 50
         color: focus ? "red" : "lightgray"
         KeyNavigation.left: item3
         KeyNavigation.up: item2
     }
 }

KeyNavigation receives key events after the item it is attached to. If the item accepts an arrow key event, the KeyNavigation attached property will not receive an event for that key.

If an item has been set for a direction and the KeyNavigation attached property receives the corresponding key press and release events, the events will be accepted by KeyNaviagtion and will not propagate any further.

See also Keys attached property.


Property Documentation

left : Item
right : Item
up : Item
down : Item

These properties hold the item to assign focus to when Key_Left, Key_Right, Key_Up or Key_Down are pressed.



Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies) Trademarks
Qt 4.7.0