Reaguj, aby skupić

Zapewnij wizualne wskazówki ułatwiające wizualizację.

Wszystkie możliwe do zaznaczenia elementy z motywu Material Design mają już styl skupienia pasujący do motywu, ale może być konieczne dodanie kilku elementów wizualnych, aby łatwiej go było zauważyć. Dobrym rozwiązaniem jest zmiana obramowania elementu kolorem, który dobrze kontrastuje z tłem:

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

W tym przykładzie remember służy do przechowywania koloru obramowania wszystkich zmian kompozycji, a obrys elementu jest aktualizowany za każdym razem, gdy element staje się aktywny lub przestaje być zaznaczony.

Stosuj zaawansowane wskazówki wizualne

W Jetpack Compose możesz też tworzyć bardziej zaawansowane wskazówki wizualne, które lepiej pasują do Twojego interfejsu.

1. Najpierw utwórz IndicationInstance, który wizualnie rysuje w interfejsie:

   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. Następnie utwórz Indication i zapamiętuj stan zaznaczenia:

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

3. Dodaj do interfejsu zarówno Indication, jak i InteractionSource, korzystając z modyfikatora indication():

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

Informacje o stanie skupienia

Ogólnie po każdej zmianie stanu zaznaczenia element FocusEvent jest wywoływany, a elementy nadrzędne modyfikatora focusable() mogą nasłuchiwać go z użyciem modyfikatora onFocusChanged().

Jeśli chcesz poznać stan zaznaczenia,możesz używać tych interfejsów API w połączeniu z modyfikatorem onFocusChanged:

• isFocused zwraca wartość true, jeśli funkcja kompozycyjna, do której dołączony jest modyfikator, jest zaznaczona
• Funkcja hasFocus działa podobnie do isFocused, ale z pewną znaczącą różnicą: zamiast sprawdzania tylko bieżącego elementu sprawdza, czy zaznaczony jest element lub jedno z jego elementów podrzędnych
• Funkcja isCaptured zwraca wartość true za każdym razem, gdy kursor jest aktywny. Dzieje się tak na przykład, gdy element TextField zawiera nieprawidłowe dane, więc próba zaznaczenia innych elementów nie spowoduje usunięcia zaznaczenia.

Oto te pola:

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