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) ) {}
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.
- 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) } } }
- 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) } } }
- Dodaj do interfejsu zarówno
Indication
, jak iInteractionSource
, korzystając z modyfikatoraindication()
:val highlightIndication = remember { MyHighlightIndication() } var interactionSource = remember { MutableInteractionSource() } Card( modifier = Modifier .clickable( interactionSource = interactionSource, indication = highlightIndication, enabled = true, onClick = { } ) ) {}
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 doisFocused
, 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 elementTextField
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
}
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Zmienianie działania skupienia
- Material Design 2 w obszarze Utwórz
- Obsługuj dane wejściowe użytkownika