Botón de selección

Un botón de selección permite que un usuario seleccione una opción de un conjunto de opciones. Se usa un botón de selección cuando solo se puede seleccionar un elemento de una lista. Si los usuarios necesitan seleccionar más de un elemento, usa un interruptor.

Plataforma de la API

Usa el elemento componible RadioButton para enumerar las opciones disponibles. Une 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 se ejecuta cuando se 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 presiona, se coloca el cursor sobre él o se enfoca.

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

El siguiente fragmento de código muestra 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 que se seleccionó actualmente.
  • 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 un comportamiento de accesibilidad adecuado para los lectores de pantalla. Le 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 Row actúe como un solo elemento selectable.
  • selected indica si se selecciona el Row actual 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

Recursos adicionales

• Material Design: Botones