フォーカス状態を示す

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

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

マテリアル コンポーネントは、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")
}

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

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

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

var interactionSource = remember { MutableInteractionSource() }

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

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