フォーカス移動順序の変更

デフォルトのフォーカス移動順序のセクションでは、Compose がどのように機能するかを説明しました。 は、どちらの要素に対しても、要素にフォーカス トラバーサルの動作を自動的に追加します。 1 次元（tab キー）ナビゲーションと 2 次元（矢印キー）ナビゲーション。一部の このデフォルトの動作をオーバーライドして、 必要な移動順序について 確認できます

1 次元の移動順序をオーバーライドする

1 次元ナビゲーションのデフォルトのフォーカス移動順序を変更するには、 フォーカス可能なコンポーザブルごとに 1 つずつ、参照のセットを作成します。

val (first, second, third, fourth) = remember { FocusRequester.createRefs() }
FocusSnippets.kt

次に、focusRequester 修飾子を使用して、それぞれを コンポーザブル:

Column {
    Row {
        TextButton({}, Modifier.focusRequester(first)) { Text("First field") }
        TextButton({}, Modifier.focusRequester(third)) { Text("Third field") }
    }

    Row {
        TextButton({}, Modifier.focusRequester(second)) { Text("Second field") }
        TextButton({}, Modifier.focusRequester(fourth)) { Text("Fourth field") }
    }
}
FocusSnippets.kt

focusProperties 修飾子を使用して、カスタムの移動順序を指定できるようになりました。

Column {
    Row {
        TextButton(
            {},
            Modifier
                .focusRequester(first)
                .focusProperties { next = second }
        ) {
            Text("First field")
        }
        TextButton(
            {},
            Modifier
                .focusRequester(third)
                .focusProperties { next = fourth }
        ) {
            Text("Third field")
        }
    }

    Row {
        TextButton(
            {},
            Modifier
                .focusRequester(second)
                .focusProperties { next = third }
        ) {
            Text("Second field")
        }
        TextButton(
            {},
            Modifier
                .focusRequester(fourth)
                .focusProperties { next = first }
        ) {
            Text("Fourth field")
        }
    }
}
FocusSnippets.kt

2 次元の移動順序をオーバーライドする

フォーカス移動順序をきめ細かく制御することもできます。 矢印キーによる 2 次元ナビゲーションの場合です要素ごとに 各ルートのデフォルトのナビゲーション デスティネーションをオーバーライドするために、 focusProperties 修飾子で、表示するアイテムを指定します。 方向を表します。

TextButton(
    onClick = {},
    modifier = Modifier
        .focusRequester(fourth)
        .focusProperties {
            down = third
            right = second
        }
) {}
FocusSnippets.kt

この手法では、キーボードの矢印キーが効果的に使用されるだけでなく、 有線とワイヤレスのコントローラの D-pad とスティック。

前へ
概要
次へ
フォーカス動作を変更する