Case d'option

Une case d'option permet à l'utilisateur de sélectionner une option parmi un ensemble d'options. Vous utilisez une case d'option lorsqu'un seul élément peut être sélectionné dans une liste. Si les utilisateurs doivent sélectionner plusieurs éléments, utilisez plutôt un boutons bascule.

Figure 1. Paire de cases d'option, dont une est sélectionnée.

Surface de l'API

Utilisez le composable RadioButton pour afficher les options disponibles. Encapsulez chaque option RadioButton et son libellé dans un composant Row pour les regrouper.

RadioButton inclut les principaux paramètres suivants:

• selected: indique si la case d'option est sélectionnée.
• onClick: fonction lambda exécutée lorsque l'utilisateur clique sur la case d'option. Si la valeur est null, l'utilisateur ne peut pas interagir directement avec le bouton radio.
• enabled: indique si la case d'option est activée ou désactivée. Les utilisateurs ne peuvent pas interagir avec les boutons d'option désactivés.
• interactionSource: vous permet d'observer l'état d'interaction du bouton, par exemple s'il est enfoncé, pointé ou sélectionné.

Créer un bouton radio de base

L'extrait de code suivant affiche une liste de boutons d'option dans un Column:

@Composable
fun RadioButtonSingleSelection(modifier: Modifier = Modifier) {
    val radioOptions = listOf("Calls", "Missed", "Friends")
    val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
    // Note that Modifier.selectableGroup() is essential to ensure correct accessibility behavior
    Column(modifier.selectableGroup()) {
        radioOptions.forEach { text ->
            Row(
                Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .selectable(
                        selected = (text == selectedOption),
                        onClick = { onOptionSelected(text) },
                        role = Role.RadioButton
                    )
                    .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(
                    selected = (text == selectedOption),
                    onClick = null // null recommended for accessibility with screen readers
                )
                Text(
                    text = text,
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(start = 16.dp)
                )
            }
        }
    }
}
RadioButton.kt

Points clés concernant le code

• radioOptions représente les libellés des boutons radio.
• La fonction composable remember crée une variable d'état selectedOption et une fonction permettant de mettre à jour cet état appelée onOptionSelected. Cet état contient l'option de case d'option actuellement sélectionnée.
  • mutableStateOf(radioOptions[0]) initialise l'état sur le premier élément de la liste. "Appels" étant le premier élément, c'est la case d'option sélectionnée par défaut.
• Modifier.selectableGroup() garantit un comportement d'accessibilité approprié pour les lecteurs d'écran. Il informe le système que les éléments de cet élément Column font partie d'un groupe sélectionnable, ce qui permet une prise en charge appropriée des lecteurs d'écran.
• Modifier.selectable() fait en sorte que l'ensemble de Row agisse comme un seul élément sélectionnable.
  • selected indique si l'Row actuelle est sélectionnée en fonction de l'état selectedOption.
  • La fonction lambda onClick met à jour l'état selectedOption sur l'option sélectionnée lorsque l'utilisateur clique sur Row.
  • role = Role.RadioButton informe les services d'accessibilité que Row fonctionne comme une case d'option.
• RadioButton(...) crée le composable RadioButton.
  • onClick = null sur le RadioButton améliore l'accessibilité. Cela empêche la case d'option de gérer directement l'événement de clic et permet au modificateur selectable de Row de gérer l'état de sélection et le comportement d'accessibilité.

Résultat

Figure 2. Trois boutons d'option avec l'option "Amis" sélectionnée.

Ressources supplémentaires

• Material Design: Boutons