Fournir des repères visuels pour faciliter la visualisation de la concentration
Bien que tous les éléments sélectionnables de Material Theme aient déjà un style de focus correspondant au thème, vous devrez peut-être ajouter des éléments visuels pour qu'ils soient plus faciles à repérer. Une bonne solution consiste à modifier la bordure de votre élément avec une couleur qui contraste bien avec l'arrière-plan:
var color by remember { mutableStateOf(Color.White) } Card( modifier = Modifier .onFocusChanged { color = if (it.isFocused) Red else White } .border(5.dp, color) ) {}
Dans cet exemple, remember
est utilisé pour stocker la couleur de la bordure entre les recompositions, et le contour de l'élément est mis à jour chaque fois que l'élément devient ou perd son focus.
Implémenter des repères visuels avancés
Jetpack Compose vous permet également de créer des repères visuels plus sophistiqués et avancés qui correspondent mieux à votre interface utilisateur.
- Commencez par créer un
IndicationInstance
qui dessine visuellement le repère souhaité dans votre interface utilisateur :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) } } }
- Ensuite, créez un
Indication
et rappelez-vous l'état sélectionné :class MyHighlightIndication : Indication { @Composable override fun rememberUpdatedInstance(interactionSource: InteractionSource): IndicationInstance { val isFocusedState = interactionSource.collectIsFocusedAsState() return remember(interactionSource) { MyHighlightIndicationInstance(isEnabledState = isFocusedState) } } }
- Ajoutez
Indication
etInteractionSource
à l'interface utilisateur via le modificateurindication()
:val highlightIndication = remember { MyHighlightIndication() } var interactionSource = remember { MutableInteractionSource() } Card( modifier = Modifier .clickable( interactionSource = interactionSource, indication = highlightIndication, enabled = true, onClick = { } ) ) {}
Comprendre l'état de la priorité
En règle générale, chaque fois qu'un état de sélection change, un FocusEvent
est déclenché dans l'arborescence, et les parents d'un modificateur focusable()
peuvent l'écouter à l'aide du modificateur onFocusChanged()
.
Si vous avez besoin de connaître l'état du focus,vous pouvez utiliser ces API avec le modificateur onFocusChanged
:
isFocused
renvoietrue
si le composable auquel le modificateur est associé est sélectionné.hasFocus
fonctionne de la même manière queisFocused
, mais avec une différence importante : au lieu de vérifier uniquement l'actuel, il vérifie si l'élément ou l'un de ses enfants est sélectionné.isCaptured
renvoietrue
chaque fois que la sélection est maintenue. Cela se produit, par exemple, lorsqu'unTextField
contient des données incorrectes, si bien que le fait de cibler d'autres éléments n'efface pas le ciblage.
Ces champs sont indiqués ci-dessous:
Modifier.onFocusChanged {
val isFocused = it.isFocused
val hasFocus = it.hasFocus
val isCaptured= it.isCaptured
}
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Modifier le comportement de sélection
- Material Design 2 dans Compose
- Gérer les entrées utilisateur