フォーカス状態を示す

フォーカス状態は、現在入力フォーカスがある UI 要素をユーザーが把握できるように、明確な視覚的合図を提供します。インタラクティブなマテリアル 3 コンポーネントはすべて、デフォルトでフォーカス表示が組み込まれています。

注: このガイドでは、視覚的なフォーカス表示を描画する方法について説明します。フォーカス遷移をプログラムでリッスンしたり、フォーカス フラグ（isFocused、hasFocus、isCaptured）をクエリしたり、状態駆動型の UI 変更をトリガーしたりするには、フォーカスに反応するをご覧ください。

マテリアル テーマのフォーカス表示

マテリアル コンポーネントは、ripple 関数と LocalIndication を使用して、視覚状態の変化を描画します。標準のマテリアル フォーカス フィードバックをカスタム コンポーネントに付加するには:

1. remember { MutableInteractionSource() } を使用して MutableInteractionSource を作成します。
2. ripple() とともに、インタラクション ソースを indication 修飾子に渡します。

val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = null
        ) { /* onClick */ }
        .indication(
            interactionSource = interactionSource,
            indication = ripple()
        )
) {
    Text("Custom component with Material ripple")
}
FocusedState.kt

カスタム フォーカス表示を実装する

カスタムの視覚的合図（拡大縮小、境界線、グロー効果など）の場合:

1. IndicationNodeFactory を作成します。
2. 要素の InteractionSource によって出力されるフォーカス操作を観察します。
3. indication 修飾子を使用してカスタム インジケーターを適用します。

var interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = MyHighlightIndication,
            enabled = true,
            onClick = { }
        )
) {
    Text("hello")
}
FocusSnippets.kt