Odaklanmak için tepki ver

Görselleştirmeyi kolaylaştırmak için görsel ipuçları sağlayın

Materyal Tema'daki tüm odaklanılabilir öğeler zaten temayla eşleşen bir odak stiline sahip olsa da, odaklanan öğenin daha kolay fark edilmesini sağlamak için bazı görsel öğeler eklemeniz gerekebilir. Öğenizin kenarlığını, arka planla kontrastı iyi olan bir renkle değiştirmek iyi bir çözüm olabilir:

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, yeniden bestelerde kenarlığın rengini saklamak için kullanılır ve öğenin ana hatları, öğe her odaklandığında veya kaybolduğunda güncellenir.

Gelişmiş görsel işaretler uygulayın

Jetpack Compose ile kullanıcı arayüzünüze daha uygun olan daha sofistike ve gelişmiş görsel işaretler de oluşturabilirsiniz.

1. Öncelikle, kullanıcı arayüzünde istediğiniz ipucunu 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ştiriciyle 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, odağın bir durumu her değiştiğinde, ağaçta bir FocusEvent tetiklenir ve focusable() değiştiricisinin üst öğeleri onFocusChanged() değiştiricisini kullanarak bunu dinleyebilir.

Odağın durumunu bilmeniz gerekiyorsa bu API'leri onFocusChanged değiştiricisiyle birlikte kullanabilirsiniz:

• isFocused, değiştiricinin eklendiği besteye odaklanmışsa true değerini döndürür
• hasFocus, isFocused ile benzer şekilde çalışır, ancak arada önemli bir fark vardır. Yalnızca geçerlini kontrol etmek yerine, öğenin veya alt öğelerinden birinin odaklanıp odaklanmadığını kontrol eder.
• isCaptured, odak tutulduğunda true değerini döndürür. Bu durum, örneğin bir TextField yanlış veri içerdiğinde, diğer öğelere odaklanmaya çalışıldığında odağın temizlenmemesi meydana gelir.

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

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