Contents

QML FocusScope Element

The FocusScope object explicitly creates a focus scope. More...

Inherits Item

This element was introduced in Qt 4.7.

Detailed Description

Focus scopes assist in keyboard focus handling when building reusable QML components. All the details are covered in the keyboard focus documentation.

See also Keyboard focus example.

You may use the documentation under the terms of the GNU Free Documentation License version 1.3, as published by the Free Software Foundation. Alternatively, you may use the documentation in accordance with the terms contained in a written agreement between you and Nokia.

Hide Notes

Notes provided by the Qt Community
Best Practice
  • 5

Votes: 3

Coverage: Qt library 4.7, 4.8

Picture of changsheng230 changsheng230

Robot Herder
2 notes

FocusScope best practice sample code

Within each focus scope, the best practice is to set only one element property Item::focus set as true:

  1. import QtQuick 1.0
  2.  
  3. /*
  4.     Blue border indicates scoped focus
  5.     Black border indicates NOT scoped focus
  6.     Red box indicates active focus
  7.     Use arrow keys to navigate
  8. */
  9. Rectangle {
  10.     color: "white"
  11.     width: 480
  12.     height: 480
  13.  
  14.     FocusScope {
  15.         id: myScope
  16.         focus: true
  17.        
  18.         Rectangle {
  19.             height: 120
  20.             width: 420
  21.  
  22.             color: "transparent"
  23.             border.width: 5
  24.             border.color: myScope.activeFocus?"blue":"black"
  25.  
  26.             Rectangle {
  27.                 id: item1
  28.                 x: 10; y: 10
  29.                 width: 100; height: 100; color: "green"
  30.                 border.width: 5
  31.                 border.color: activeFocus?"blue":"black"
  32.                 KeyNavigation.right: item2
  33.                 focus: true
  34.  
  35.                 Rectangle {
  36.                     width: 50; height: 50; anchors.centerIn: parent
  37.                     color: parent.focus?"red":"transparent"
  38.                 }
  39.             }
  40.  
  41.             Rectangle {
  42.                 id: item2
  43.                 x: 310; y: 10
  44.                 width: 100; height: 100; color: "green"
  45.                 border.width: 5
  46.                 border.color: activeFocus?"blue":"black"
  47.                 KeyNavigation.left: item1
  48.                 Keys.onDigit9Pressed: console.log("Top Right");
  49.  
  50.                 Rectangle {
  51.                     width: 50; height: 50; anchors.centerIn: parent
  52.                     color: parent.focus?"red":"transparent"
  53.                 }
  54.             }
  55.         }
  56.         KeyNavigation.down: item3
  57.     }
  58.  
  59.     Rectangle {
  60.         id: item3
  61.         x: 10; y: 300
  62.         width: 100; height: 100; color: "green"
  63.         border.width: 5
  64.         border.color: activeFocus?"blue":"black"
  65.  
  66.         KeyNavigation.up: myScope
  67.  
  68.         Rectangle {
  69.             width: 50; height: 50; anchors.centerIn: parent
  70.             color: parent.focus?"red":"transparent"
  71.         }
  72.     }
  73.  
  74. }

[Revisions]

Creative Commons Attribution-ShareAlike 2.5 Generic

Community Notes are available under

Attribution-Share Alike 2.5 Generic

© 2011 Qt Project Hosting. Qt® and the Qt logo is a registered trade mark of Nokia Corporation and/or its subsidiaries and is used pursuant to a license from Nokia Corporation and/or its subsidiaries.
All other trademarks are property of their respective owners. Privacy Policy
This site is hosted by Gitorious AS. Your use of this web site is governed by these terms of service.

Qt Project Hosting, P.O. Box 4332 Nydalen, 0402 Oslo, Norway. Phone: +47 21 60 27 32. Org. Nr. 997 447 913