Bereaksi terhadap fokus

Memberikan isyarat visual untuk visualisasi fokus yang lebih mudah

Meskipun semua elemen yang dapat difokuskan dari Material Theme sudah memiliki gaya fokus yang sesuai dengan tema, Anda mungkin perlu menambahkan beberapa elemen visual untuk membuat elemen yang terfokus yang lebih mudah ditemukan. Solusi yang baik adalah dengan mengubah batas tepi elemen Anda dengan warna yang memiliki kontras dengan latar belakang yang baik:

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 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 MyHighlightIndicationNode(private val interactionSource: InteractionSource) :
       Modifier.Node(), DrawModifierNode {
       private var isFocused = false
   
       override fun onAttach() {
           coroutineScope.launch {
               var focusCount = 0
               interactionSource.interactions.collect { interaction ->
                   when (interaction) {
                       is FocusInteraction.Focus -> focusCount++
                       is FocusInteraction.Unfocus -> focusCount--
                   }
                   val focused = focusCount > 0
                   if (isFocused != focused) {
                       isFocused = focused
                       invalidateDraw()
                   }
               }
           }
       }
   
       override fun ContentDrawScope.draw() {
           drawContent()
           if (isFocused) {
               drawRect(size = size, color = Color.White, alpha = 0.2f)
           }
       }
   }
   FocusSnippets.kt

2. Selanjutnya, buat Indication dan ingat status fokus:

   object MyHighlightIndication : IndicationNodeFactory {
       override fun create(interactionSource: InteractionSource): DelegatableNode {
           return MyHighlightIndicationNode(interactionSource)
       }
   
       override fun hashCode(): Int = -1
   
       override fun equals(other: Any?) = other === this
   }
   FocusSnippets.kt

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

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

Memahami status fokus

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

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

• isFocused menampilkan true jika composable tempat pengubah dilampirkan berfokus
• hasFocus berfungsi mirip dengan isFocused, tetapi dengan perbedaan yang signifikan: alih-alih memeriksa yang saat ini saja, ia memeriksa apakah suatu elemen atau salah satu anak-anak tetap fokus
• isCaptured menampilkan true setiap kali fokus ditahan. Hal ini terjadi, karena saat TextField berisi data yang salah sehingga pengguna mencoba berfokus elemen lain tidak akan menghapus fokus.

Kolom ini ditampilkan di bawah ini:

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