フォーカス状態を示す

フォーカス状態は、現在どの 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