Reagieren, um den Fokus zu schärfen

Visuelle Hinweise für eine einfachere Visualisierung des Fokus bereitstellen

Auch wenn alle fokussierbaren Elemente aus Material Theme bereits einen Fokusstil haben, der zum Design passt, müssen Sie möglicherweise einige visuelle Elemente hinzufügen, damit das Element im Fokus leichter zu erkennen ist. Eine gute Lösung wäre, den Rahmen des Elements in eine Farbe zu ändern, die einen guten Kontrast zum Hintergrund hat:

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

In diesem Beispiel wird remember verwendet, um die Rahmenfarbe bei Neuzusammensetzungen zu speichern. Der Umriss des Elements wird jedes Mal aktualisiert, wenn das Element gewinnt oder den Fokus verliert.

Erweiterte visuelle Hinweise implementieren

Mit Jetpack Compose können Sie komplexere und komplexere visuelle Hinweise erstellen, die besser zu Ihrer UI passen.

1. Erstelle zuerst eine IndicationInstance, die den gewünschten Hinweis in deiner UI visuell zeichnet:

   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. Erstellen Sie als Nächstes ein Indication und speichern Sie den fokussierten Zustand:

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

3. Fügen Sie der Benutzeroberfläche über den indication()-Modifikator sowohl das Indication als auch ein InteractionSource hinzu:

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

Den Fokus verstehen

Im Allgemeinen wird jedes Mal, wenn sich ein Status des Fokus ändert, ein FocusEvent im Baum ausgelöst und die übergeordneten Elemente eines focusable()-Modifikators können diesen mit dem onFocusChanged()-Modifikator überwachen.

Wenn Sie den Fokusstatus kennen müssen,können Sie diese APIs in Verbindung mit dem onFocusChanged-Modifikator verwenden:

• isFocused gibt true zurück, wenn die zusammensetzbare Funktion, an die der Modifikator angehängt ist, hervorgehoben ist
• hasFocus funktioniert ähnlich wie isFocused, hat aber einen wesentlichen Unterschied: Statt nur den aktuellen zu prüfen, wird geprüft, ob das Element oder eines seiner untergeordneten Elemente fokussiert ist.
• isCaptured gibt true zurück, wenn der Fokus gehalten wird. Das kommt beispielsweise vor, wenn TextField falsche Daten enthält und der Fokus nicht auf andere Elemente gelenkt wird.

Diese Felder sind unten zu sehen:

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