Botón segmentado

Usa un botón segmentado para permitir 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).

Plataforma de la API

Usa los diseños SingleChoiceSegmentedButtonRow y MultiChoiceSegmentedButtonRow para crear botones segmentados. Estos diseños garantizan que los SegmentedButton se posicionen y tengan el tamaño correcto, 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.

Cómo crear 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 de botón seleccionado actualmente.
  • Define una lista de options que representa las etiquetas de los botones.
  • SingleChoiceSegmentedButtonRow garantiza que solo se pueda seleccionar un botón.
  • Crea un SegmentedButton para cada opción, dentro del bucle forEachIndexed:
    • shape define la forma del botón en función de su índice y el recuento 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, se seleccionó la opción Día.
Figura 2: Un botón de selección única con una opción elegida.

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

En este ejemplo, se muestra cómo crear un botón segmentado de varias opciones con íconos que permite 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 realiza 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 el recuento total de opciones.
    • checked establece el estado de marcado del botón según el valor correspondiente en selectedOptions.
    • onCheckedChange activa o desactiva 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 de verificación del botón.
    • label muestra un ícono que corresponde a la etiqueta, con elementos componibles Icon con los vectores de imagen y las descripciones de contenido adecuados.

Resultado

Se muestra un componente de botón segmentado con las opciones Caminar, Andar en bicicleta y Conducir. Actualmente, las opciones Caminar y Viajar están seleccionadas.
Figura 2: Un botón segmentado de selección múltiple con dos opciones elegidas.

Recursos adicionales