Odaklanmak için tepki ver

Odaklanmayı kolaylaştırmak için görsel ipuçları kullanın

Materyal Tema'daki odaklanılabilir tüm öğelerin halihazırda bir odak stili varken bir görsel öğeyi teslim etmek için daha kolay fark edilmesini sağlar. Projenin sınırlarını değiştirmek iyi bir çözümdür öğeyi arka planla iyi bir kontrasta sahip bir renkte olacak şekilde değiştirin:

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

Bu örnekte, remember hücresi, diğer kenarlığın rengini saklamak için kullanılmıştır. ve öğenin dış çizgisi, öğe her seferinde güncellenir zaman kaybına uğrar.

Gelişmiş görsel ipuçları uygulayın

Jetpack Compose ile daha sofistike ve gelişmiş görsel oluşturabilirsiniz. daha iyi işaretler.

1. İlk olarak, kullanıcı arayüzünde istediğiniz işareti görsel olarak çizen bir IndicationInstance oluşturun:

   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. Ardından, bir Indication oluşturun ve odaklanılan durumu hatırlayın:

   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. indication() değiştiricisini kullanarak kullanıcı arayüzüne hem Indication hem de InteractionSource ekleyin:

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

Odaklanma durumunu anlama

Genellikle, odak durumu her değiştiğinde bir FocusEvent tetiklenir ağaç ve focusable() değiştiricinin üst öğeleri, bu işlevi onFocusChanged() değiştiricisi.

Odaklanma durumunu bilmeniz gerekiyorsa bu API'leri birlikte onFocusChanged değiştiriciyle:

• isFocused, düzenleyicinin eklendiği composable, true değerini döndürür. odaklı
• hasFocus, isFocused ile benzer şekilde çalışır ancak önemli bir fark vardır: yalnızca mevcut öğeyi kontrol etmek yerine, ilgili öğenin veya ona ait öğelerden birinin çocuklara odaklanıyor
• isCaptured, odak basılı tutulduğunda true değerini döndürür. Bu durum TextField yanlış veri içerdiğinde, dolayısıyla da odaklanmaya çalışırken odaklanmak işe yaramaz.

Bu alanlar aşağıda gösterilmektedir:

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