Menunjukkan status fokus

Status fokus memberikan petunjuk 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")
}

Mengimplementasikan indikasi fokus kustom

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

  1. Buat IndicationNodeFactory.
  2. Amati interaksi fokus yang dikeluarkan 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