Bouton segmenté

Utilisez un bouton segmenté pour permettre aux utilisateurs de choisir parmi un ensemble d'options côte à côte. Il existe deux types de boutons segmentés:

• Bouton à sélection unique: permet aux utilisateurs de choisir une seule option.
• Bouton de sélection multiple: permet aux utilisateurs de choisir entre deux et cinq éléments. Pour des choix plus complexes ou plus de cinq éléments, utilisez des chips.

Surface de l'API

Utilisez les mises en page SingleChoiceSegmentedButtonRow et MultiChoiceSegmentedButtonRow pour créer des boutons segmentés. Ces mises en page garantissent que les SegmentedButton sont positionnés et dimensionnés correctement, et partagent les paramètres clés suivants:

• space: ajuste le chevauchement entre les boutons.
• content: contient le contenu de la ligne de boutons segmentés, qui est généralement une séquence de SegmentedButton.

Créer un bouton segmenté à sélection unique

Cet exemple montre comment créer un bouton segmenté à sélection unique:

@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val options = listOf("Day", "Month", "Week")

    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex,
                label = { Text(label) }
            )
        }
    }
}
SegmentedButton.kt

Points clés concernant le code

• Initialise une variable selectedIndex à l'aide de remember et mutableIntStateOf pour suivre l'index de bouton actuellement sélectionné.
• Définit une liste de options représentant les libellés des boutons.
• SingleChoiceSegmentedButtonRow garantit qu'un seul bouton peut être sélectionné.
• Crée un SegmentedButton pour chaque option, dans la boucle forEachIndexed :
  • shape définit la forme du bouton en fonction de son indice et du nombre total d'options à l'aide de SegmentedButtonDefaults.itemShape.
  • onClick met à jour selectedIndex avec l'index du bouton sur lequel l'utilisateur a cliqué.
  • selected définit l'état de sélection du bouton en fonction de selectedIndex.
  • label affiche le libellé du bouton à l'aide du composable Text.

Résultat

Créer un bouton segmenté à sélection multiple

Cet exemple montre comment créer un bouton segmenté à choix multiples avec des icônes permettant aux utilisateurs de sélectionner plusieurs options:

@Composable
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
    val selectedOptions = remember {
        mutableStateListOf(false, false, false)
    }
    val options = listOf("Walk", "Ride", "Drive")

    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                checked = selectedOptions[index],
                onCheckedChange = {
                    selectedOptions[index] = !selectedOptions[index]
                },
                icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },
                label = {
                    when (label) {
                        "Walk" -> Icon(
                            imageVector =
                            Icons.AutoMirrored.Filled.DirectionsWalk,
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsBus,
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsCar,
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}
SegmentedButton.kt

Points clés concernant le code

• Le code initialise la variable selectedOptions à l'aide de remember et mutableStateListOf. Cela permet de suivre l'état sélectionné de chaque bouton.
• Le code utilise MultiChoiceSegmentedButtonRow pour contenir les boutons.
• Dans la boucle forEachIndexed, le code crée un SegmentedButton pour chaque option :
  • shape définit la forme du bouton en fonction de son indice et du nombre total d'options.
  • checked définit l'état de coche du bouton en fonction de la valeur correspondante dans selectedOptions.
  • onCheckedChange active ou désactive l'état sélectionné de l'élément correspondant dans selectedOptions lorsque l'utilisateur clique sur le bouton.
  • icon affiche une icône en fonction de SegmentedButtonDefaults.Icon et de l'état de coche du bouton.
  • label affiche une icône correspondant au libellé, à l'aide de composables Icon avec des vecteurs d'image et des descriptions de contenu appropriés.

Résultat

Ressources supplémentaires

• Matériel 3: Boutons segmentés