Botón de selección

Un botón de selección permite que un usuario elija una opción de un conjunto de opciones. Usa un botón de selección cuando solo se pueda seleccionar un elemento de una lista. Si los usuarios necesitan seleccionar más de un elemento, usa un interruptor en su lugar.

Figura 1: Un par de botones de selección con una opción seleccionada

Superficie de la API

Usa el elemento componible RadioButton para enumerar las opciones disponibles. Une cada opción de RadioButton y su etiqueta dentro de un componente Row para agruparlas.

RadioButton incluye los siguientes parámetros clave:

• selected: Indica si el botón de selección está activado.
• onClick: Es una función lambda que ejecuta tu app cuando el usuario hace clic en el botón de selección. Si es null, el usuario no puede interactuar directamente con el botón de selección.
• enabled: Controla si el botón de selección está habilitado o inhabilitado. Los usuarios no pueden interactuar con los botones de selección inhabilitados.
• interactionSource: Te permite observar el estado de interacción del botón, por ejemplo, si se presionó, se colocó el cursor sobre él o se enfocó.

Crea un botón de selección básico

En el siguiente fragmento de código, se renderiza una lista de botones de selección dentro de 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

Puntos clave sobre el código

• radioOptions representa las etiquetas de los botones de selección.
• La función de componibilidad remember crea una variable de estado selectedOption y una función para actualizar ese estado, llamada onOptionSelected. Este estado contiene la opción de botón de selección elegida.
  • mutableStateOf(radioOptions[0]) inicializa el estado en el primer elemento de la lista. "Llamadas" es el primer elemento, por lo que es el botón de selección que se elige de forma predeterminada.
• Modifier.selectableGroup() garantiza un comportamiento de accesibilidad adecuado para los lectores de pantalla. Informa al sistema que los elementos dentro de este Column forman parte de un grupo seleccionable, lo que habilita la compatibilidad adecuada con el lector de pantalla.
• Modifier.selectable() hace que todo el Row actúe como un solo elemento seleccionable.
  • selected indica si el Row actual se selecciona según el estado selectedOption.
  • La función lambda onClick actualiza el estado selectedOption a la opción en la que se hizo clic cuando se hace clic en Row.
  • role = Role.RadioButton informa a los servicios de accesibilidad que Row funciona como un botón de selección.
• RadioButton(...) crea el elemento RadioButton componible.
  • onClick = null en RadioButton mejora la accesibilidad. Esto evita que el botón de selección controle el evento de clic directamente y permite que el modificador selectable de Row administre el estado de selección y el comportamiento de accesibilidad.

Resultado

Figura 2: Tres botones de selección con la opción "Amigos" seleccionada.

Recursos adicionales

• Material Design: Botones