FocusScope Element Reference

The FocusScope object explicitly creates a focus scope.

[Inherits Item]

This element was introduced in Qt 4.7.

Detailed Description

The FocusScope object explicitly creates a focus scope.

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

Notes provided by the Qt Community
Best Practice
  • 5

Votes: 4

Coverage: Qt library 4.7, 4.8

Picture of changsheng230 changsheng230

Lab Rat
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]