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

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

3. indication() değiştiricisini kullanarak kullanıcı arayüzüne hem Indication hem de InteractionSource ekleyin:

   val highlightIndication = remember { MyHighlightIndication() }
   var interactionSource = remember { MutableInteractionSource() }
   
   Card(
       modifier = Modifier
           .clickable(
               interactionSource = interactionSource,
               indication = highlightIndication,
               enabled = true,
               onClick = { }
           )
   ) {}
   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
}