Botón segmentado

Usa un botón segmentado para que los usuarios elijan entre un conjunto de opciones, una al lado de la otra. Existen dos tipos de botones segmentados:

  • Botón de selección única: Permite que los usuarios elijan una opción.
  • Botón de selección múltiple: Permite que los usuarios elijan entre dos y cinco elementos. Para opciones más complejas o más de cinco elementos, usa chips.
Se muestra un componente de botón segmentado. El primer botón permite una sola selección, mientras que el segundo permite varias selecciones.
Figura 1. Un botón de selección única (1) y un botón de selección múltiple (2).

Superficie de la API

Usa los diseños SingleChoiceSegmentedButtonRow y MultiChoiceSegmentedButtonRow para crear botones segmentados. Estos diseños posicionan y dimensionan correctamente los SegmentedButtons, y comparten los siguientes parámetros clave:

  • space: Ajusta la superposición entre los botones.
  • content: Contiene el contenido de la fila de botones segmentados, que suele ser una secuencia de SegmentedButton.

Crea un botón segmentado de selección única

En este ejemplo, se muestra cómo crear un botón segmentado de selección única:

@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

Puntos clave sobre el código

  • Inicializa una variable selectedIndex con remember y mutableIntStateOf para hacer un seguimiento del índice del botón seleccionado.
  • Define una lista de options que representa las etiquetas de los botones.
  • SingleChoiceSegmentedButtonRow te permite seleccionar solo un botón.
  • Crea un SegmentedButton para cada opción, dentro del bucle forEachIndexed:
    • shape define la forma del botón según su índice y la cantidad total de opciones con SegmentedButtonDefaults.itemShape.
    • onClick actualiza selectedIndex con el índice del botón en el que se hizo clic.
    • selected establece el estado de selección del botón según selectedIndex.
    • label muestra la etiqueta del botón con el elemento componible Text.

Resultado

Se muestra un componente de botón segmentado con las opciones Día, Mes y Semana. Actualmente, está seleccionada la opción Día.
Figura 2. Un botón de selección única con una opción seleccionada.

Crea un botón segmentado de selección múltiple

En este ejemplo, se muestra cómo crear un botón segmentado de selección múltiple con íconos que permiten a los usuarios seleccionar varias opciones:

@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

Puntos clave sobre el código

  • El código inicializa la variable selectedOptions con remember y mutableStateListOf. Esto hace un seguimiento del estado seleccionado de cada botón.
  • El código usa MultiChoiceSegmentedButtonRow para contener los botones.
  • Dentro del bucle forEachIndexed, el código crea un SegmentedButton para cada opción:
    • shape define la forma del botón según su índice y la cantidad total de opciones.
    • checked establece el estado marcado del botón según el valor correspondiente en selectedOptions.
    • onCheckedChange alterna el estado seleccionado del elemento correspondiente en selectedOptions cuando se hace clic en el botón.
    • icon muestra un ícono basado en SegmentedButtonDefaults.Icon y el estado marcado del botón.
    • label muestra un ícono correspondiente a la etiqueta, con elementos componibles Icon con vectores de imagen y descripciones de contenido adecuados.

Resultado

Se muestra un componente de botón segmentado con las opciones Caminar, Bicicleta y Conducir. Actualmente, están seleccionadas las opciones Caminar y Viajar.
Figura 3. Un botón segmentado de selección múltiple con dos opciones seleccionadas.

Recursos adicionales