プログラムでフォーカスをリクエストする

一部のユーザーフローでは、アプリが特定のコンポーネントに明示的にフォーカスを移動する必要があります。たとえば、ユーザーが [検索] ボタンをクリックしたときに、検索入力フィールドに自動的にフォーカスを移動させることができます。

FocusRequester を使用する

明示的にフォーカスをリクエストするには:

  1. FocusRequester インスタンスを作成して記憶します（val focusRequester = remember { FocusRequester() }）。
  2. focusRequester 修飾子を使用して、FocusRequester をターゲット コンポーザブルにアタッチします。
  3. イベント コールバック（onClick など）またはコルーチン スコープ内で requestFocus() を呼び出します。

val focusRequester = remember { FocusRequester() }
var text by remember { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = { text = it },
    modifier = Modifier.focusRequester(focusRequester)
)
 

val focusRequester = remember { FocusRequester() }
var text by remember { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = { text = it },
    modifier = Modifier.focusRequester(focusRequester)
)

Button(onClick = { focusRequester.requestFocus() }) {
    Text("Request focus on TextField")
}

最初の画面フォーカスを設定する

画面が最初に表示されたときに特定のコンポーネントに初期フォーカスを置くには、LaunchedEffect(Unit) 内で requestFocus() をトリガーします。

LaunchedEffect(Unit) {
    focusRequester.requestFocus()
}

コンテナ間を移動する場合や、別の画面から戻る場合は、親コンテナに focusRestorer() をアタッチして、最後にフォーカスされた子に自動的にフォーカスを戻すこともできます。詳細については、フォーカスを復元するガイドをご覧ください。

前へ
リアクションして集中する
次へ
フォーカスを移動してクリア