Bereaksi terhadap fokus

Memberikan isyarat visual untuk visualisasi fokus yang lebih mudah

Meskipun semua elemen yang dapat difokuskan dari Tema Material sudah memiliki gaya fokus yang cocok dengan tema, Anda mungkin perlu menambahkan beberapa elemen visual agar elemen yang difokuskan lebih mudah dikenali. Solusi yang baik adalah mengubah batas elemen Anda dengan warna yang memiliki kontras yang baik dengan latar belakang:

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 digunakan untuk menyimpan warna batas di seluruh rekomposisi, dan garis batas elemen diperbarui setiap kali elemen mendapatkan atau kehilangan fokus.

Mengimplementasikan isyarat visual lanjutan

Dengan Jetpack Compose, Anda juga dapat membuat isyarat visual yang lebih canggih dan canggih yang lebih cocok dengan UI Anda.

1. Pertama, buat IndicationInstance yang secara visual menggambar isyarat yang Anda inginkan di UI:

   private class MyHighlightIndicationInstance(isEnabledState: State<Boolean>) :
       IndicationInstance {
       private val isEnabled by isEnabledState
       override fun ContentDrawScope.drawIndication() {
           drawContent()
           if (isEnabled) {
               drawRect(size = size, color = Color.White, alpha = 0.2f)
           }
       }
   }
   FocusSnippets.kt

2. Selanjutnya, buat Indication dan ingat status difokuskan:

   class MyHighlightIndication : Indication {
       @Composable
       override fun rememberUpdatedInstance(interactionSource: InteractionSource):
           IndicationInstance {
           val isFocusedState = interactionSource.collectIsFocusedAsState()
           return remember(interactionSource) {
               MyHighlightIndicationInstance(isEnabledState = isFocusedState)
           }
       }
   }
   FocusSnippets.kt

3. Tambahkan Indication dan InteractionSource ke UI, melalui pengubah indication():

   val highlightIndication = remember { MyHighlightIndication() }
   var interactionSource = remember { MutableInteractionSource() }
   
   Card(
       modifier = Modifier
           .clickable(
               interactionSource = interactionSource,
               indication = highlightIndication,
               enabled = true,
               onClick = { }
           )
   ) {}
   FocusSnippets.kt

Memahami status fokus

Umumnya, setiap kali status fokus berubah, FocusEvent diaktifkan hierarki, dan induk pengubah focusable() dapat memprosesnya menggunakan pengubah onFocusChanged().

Jika perlu mengetahui status fokus,Anda dapat menggunakan API ini bersama pengubah onFocusChanged:

• isFocused menampilkan true jika composable tempat pengubah terpasang difokus
• hasFocus berfungsi mirip dengan isFocused, tetapi dengan perbedaan substansial: bukan hanya memeriksa yang saat ini, tetapi memeriksa apakah elemen atau salah satu turunannya difokuskan
• isCaptured akan menampilkan true setiap kali fokus ditahan. Hal ini terjadi, misalnya, saat TextField berisi data yang salah, sehingga mencoba memfokuskan elemen lain tidak akan menghapus fokus.

Kolom tersebut ditampilkan di bawah ini:

Modifier.onFocusChanged {
    val isFocused = it.isFocused
    val hasFocus = it.hasFocus
    val isCaptured= it.isCaptured
}