Reaguj, aby skupić

Pokazuj wskazówki wizualne, aby ułatwić wizualizację skupienia

Wszystkie elementy z motywu Material Design, które można zaznaczyć, mają już styl zaznaczenia pasującego do motywu, może być konieczne dodanie elementów wizualnych, łatwiejszy do zauważenia. Dobrym rozwiązaniem jest zmiana granicy Twój element w kolorze, który ma dobry kontrast 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 zapisania koloru obramowania przekomponowania, a zarys elementu jest aktualizowany za każdym razem, traci lub traci koncentrację.

Stosuj zaawansowane wskazówki wizualne

Dzięki Jetpack Compose możesz też tworzyć które lepiej pasują do interfejsu użytkownika.

1. Najpierw utwórz IndicationInstance, który będzie wizualnie rysować w Twoim interfejsie użytkownika pożądanym:

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

   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. Dodaj do interfejsu użytkownika zarówno Indication, jak i InteractionSource przy użyciu modyfikatora indication():

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

Określenie stanu skupienia

Ogólnie rzecz biorąc, po każdej zmianie stanu celu FocusEvent uruchamia się to drzewo, a rodzice modyfikatora focusable() mogą go nasłuchiwać za pomocą onFocusChanged().

Jeśli chcesz poznać stan, na którym się skupiasz, 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 zaznaczony
• Funkcja hasFocus działa podobnie do isFocused, ale istnieje istotna różnica: zamiast sprawdzać tylko bieżącą wersję, sprawdza, czy element lub jeden z jego dzieci są skupione
• isCaptured zwraca wartość true po przytrzymaniu fokusu. Dzieje się tak w przypadku: np. gdy TextField zawiera nieprawidłowe dane, tak by próba skupienia nie wyczyści fokusu na inne elementy.

Poniżej znajdują się następujące pola:

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