フォーカス ターゲット

フォーカス ターゲットとは、キーボード フォーカスを移動できる UI 要素です。ユーザーは Tab キーと方向（矢印）キーを使用してキーボード フォーカスを移動できます。

  • Tab または Shift+Tab - 1 次元の外観順でフォーカスを前後に移動します。
  • 方向キー - フォーカスを 2 次元（上、下、左、右）に移動します。

インタラクティブな UI 要素はデフォルトでフォーカス ターゲットになる

インタラクティブなコンポーネントは、デフォルトでフォーカス ターゲットとして設定されます。つまり、ユーザーがタップまたはクリックできる UI 要素はフォーカス ターゲットであるということです。

たとえば、3 つの Card コンポーネントについて考えてみましょう。1 番目と 3 番目のカードがインタラクティブ（onClick コールバックを定義）で、2 番目のカードが純粋に情報提供用（クリック処理がない）の場合、1 番目のカードで Tab キーを押すと、2 番目のカードがスキップされ、3 番目のカードに直接移動します。

Card(onClick = { /* First card action */ }) {
    Text("Card 1 (Interactive)")
}
Card {
    Text("Card 2 (Informational - not focusable)")
}
Card(onClick = { /* Third card action */ }) {
    Text("Card 3 (Interactive)")
}

2 番目のカードをフォーカス ターゲットにするには、onClick パラメータを指定します。

Card(onClick = { /* Second card action */ }) {
    Text("Card 2 (Now interactive and focusable)")
}

clickable 修飾子は、カスタムまたは標準の UI 要素をフォーカス ターゲットにも変換します。詳しくは、タップと長押しをご覧ください。

Box(
    modifier = Modifier
        .clickable { /* Handle click */ }
) {
    Text("Custom interactive element")
}

コンポーザブルを非クリック可能なフォーカス ターゲットにする

focusable 修飾子を使用すると、クリック セマンティクスを必要とせずに、コンポーザブルをフォーカス ターゲットにできます。ユーザーはキーボード フォーカスを変更されたコンポーザブルに移動できます（たとえば、ユーザー補助ツールでコンテンツを検査したり、ビューポートをスクロールしたりできます）。ただし、Enter キーまたは Space キーを押してもクリック アクションはトリガーされません。

Box(
    modifier = Modifier
        .focusable()
) {
    Text("Non-clickable focus target")
}

コンポーザブルをフォーカス不可にする

シナリオによっては、ポインタ イベントやクリック イベントを無効にせずに、キーボード ナビゲーションからインタラクティブ要素を除外したい場合があります。focusProperties 修飾子内で canFocus = false を設定すると、コンポーネントがフォーカスを受け取らないようにできます。

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)

前へ
概要
次へ
フォーカス移動順序