Bereaksi terhadap fokus

Setiap kali fokus berubah di seluruh hierarki komposisi, Compose memicu peristiwa fokus yang dapat diamati oleh pengubah induk dan turunan. Anda dapat menggunakan pengubah onFocusChanged untuk memproses transisi status fokus, meng-kueri properti fokus saat ini, dan memicu update UI berbasis status.

Mengamati status fokus dengan onFocusChanged

Pengubah onFocusChanged menyediakan objek FocusState setiap kali elemen mendapatkan atau kehilangan fokus.

Misalnya, Anda dapat mengamati perubahan fokus untuk memperbarui status komponen kustom (seperti mengubah warna batas elemen atau memicu animasi):

var color by remember { mutableStateOf(Color.White) }
Card(
    modifier = Modifier
        .onFocusChanged {
            color = if (it.isFocused) Red else White
        }
        .border(5.dp, color)
) {}
FocusSnippets.kt

Dalam contoh ini, remember menyimpan warna batas di seluruh rekomposisi, dan warna batas diperbarui setiap kali transisi status fokus elemen.

Properti FocusState

Objek FocusState yang diteruskan ke onFocusChanged menyediakan tiga properti utama:

• isFocused: Menampilkan true jika composable tertentu yang modifier ini dilampirkan saat ini memiliki fokus input aktif.
• hasFocus: Menampilkan true jika composable ini atau composable turunannya saat ini memiliki fokus. Hal ini berguna untuk penampung induk (seperti kartu atau toolbar) yang perlu mengetahui kapan pun turunan di dalamnya aktif.
• isCaptured: Menampilkan true jika fokus saat ini dikunci ke elemen (misalnya, selama sub-interaksi modal menggunakan captureFocus()). Saat diambil, upaya untuk memindahkan fokus ke elemen lain tidak akan menghapus fokus.

Modifier.onFocusChanged { focusState ->
    val isFocused = focusState.isFocused
    val hasFocus = focusState.hasFocus
    val isCaptured = focusState.isCaptured
}