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) ) {}
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.
- 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) } } }
- 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) } } }
- Fügen Sie der Benutzeroberfläche über den
indication()
-Modifikator sowohl dasIndication
als auch einInteractionSource
hinzu:val highlightIndication = remember { MyHighlightIndication() } var interactionSource = remember { MutableInteractionSource() } Card( modifier = Modifier .clickable( interactionSource = interactionSource, indication = highlightIndication, enabled = true, onClick = { } ) ) {}
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
gibttrue
zurück, wenn die zusammensetzbare Funktion, an die der Modifikator angehängt ist, hervorgehoben isthasFocus
funktioniert ähnlich wieisFocused
, 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
gibttrue
zurück, wenn der Fokus gehalten wird. Das kommt beispielsweise vor, wennTextField
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
}
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Fokusverhalten ändern
- Material Design 2 in Compose
- Nutzereingaben verarbeiten