Menunjukkan status fokus

Status fokus memberikan isyarat visual yang jelas untuk membantu pengguna memahami elemen UI mana yang saat ini memiliki fokus input. Semua komponen Material 3 interaktif menyediakan indikasi fokus bawaan secara default.

Indikasi fokus tema Material

Komponen Material menggunakan fungsi ripple dan LocalIndication untuk menggambar perubahan status visual. Untuk melampirkan masukan fokus Material standar ke komponen kustom:

  1. Buat MutableInteractionSource menggunakan remember { MutableInteractionSource() }.
  2. Teruskan sumber interaksi ke pengubah indication, bersama dengan ripple().

val interactionSource = remember { MutableInteractionSource() }

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

Menerapkan indikasi fokus kustom

Untuk isyarat visual kustom (seperti penskalaan, batas, atau efek bercahaya):

  1. Buat IndicationNodeFactory.
  2. Amati interaksi fokus yang dipancarkan oleh InteractionSource elemen.
  3. Terapkan indikasi kustom menggunakan pengubah indication.

var interactionSource = remember { MutableInteractionSource() }

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

Sebelumnya
Memulihkan fokus
Berikutnya
Bereaksi terhadap fokus