Botón de selección

Un botón de selección permite que el usuario seleccione 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 deben 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 RadioButton componible para enumerar las opciones disponibles. Encapsula cada opción 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á seleccionado.
• onClick: Es una función lambda que ejecuta tu app cuando el usuario hace clic en el botón de opció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 radio inhabilitados.
• interactionSource: Te permite observar el estado de interacción del botón, por ejemplo, si está presionado, si el mouse se encuentra sobre él o si está enfocado.

Cómo crear un botón de opción básico

El siguiente fragmento de código 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 del botón de selección seleccionada.
  • 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 selecciona de forma predeterminada.
• Modifier.selectableGroup() garantiza el 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 permite una 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 está seleccionado según el estado de 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.
  • El onClick = null en el 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