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 commutateur.

Figure 1. Une paire de cases d'option avec une option sélectionnée.

Surface d'API

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

RadioButton inclut les paramètres clés suivants :

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

Créer une case d'option de base

L'extrait de code suivant affiche une liste de cases 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 cases d'option.
• La fonction composable remember crée une variable d'état selectedOption et une fonction pour mettre à jour cet état, appelée onOptionSelected. Cet état contient l'option de case d'option sélectionnée.
  • mutableStateOf(radioOptions[0]) initialise l'état sur le premier élément de la liste. "Calls" (Appels) est le premier élément. Il s'agit donc de la case d'option sélectionnée par défaut.
• Modifier.selectableGroup() garantit un comportement d'accessibilité approprié pour les lecteurs d'écran. Il indique au système que les éléments de ce Column font partie d'un groupe sélectionnable, ce qui permet une compatibilité appropriée avec les 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'élément Row actuel est sélectionné 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 cases d'option, avec l'option "Amis" sélectionnée.

Ressources supplémentaires

• Material Design : Boutons