Pulsante di opzione

Un pulsante di opzione consente a un utente di selezionare un'opzione da un insieme di opzioni. Utilizza un pulsante di opzione quando da un elenco è possibile selezionare un solo elemento. Se gli utenti devono selezionare più di un elemento, utilizza invece un pulsante di attivazione/disattivazione.

Figura 1. Una coppia di pulsanti di opzione con un'opzione selezionata.

API surface

Utilizza il componibile RadioButton per elencare le opzioni disponibili. Inserisci ogni opzione RadioButton e la relativa etichetta all'interno di un componente Row per raggrupparle.

RadioButton include i seguenti parametri chiave:

• selected: indica se il pulsante di opzione è selezionato.
• onClick: una funzione lambda che viene eseguita quando si fa clic sul pulsante di opzione. Se il valore è null, l'utente non può interagire direttamente con il pulsante di radio.
• enabled: controlla se il pulsante di opzione è attivato o disattivato. Gli utenti non possono interagire con i pulsanti di opzione disattivati.
• interactionSource: consente di osservare lo stato di interazione del pulsante, ad esempio se è premuto, se è visualizzato o se è attivo.

Creare un pulsante di opzione di base

Il seguente snippet di codice mostra un elenco di pulsanti di opzione all'interno di 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

Punti chiave del codice

• radioOptions rappresenta le etichette dei pulsanti di opzione.
• La funzione componibile remember crea una variabile di stato selectedOption e una funzione per aggiornare lo stato chiamata onOptionSelected. Questo stato contiene l'opzione del pulsante di opzione attualmente selezionata.
  • mutableStateOf(radioOptions[0]) inizializza lo stato al primo elemento nell'elenco. "Chiamate" è il primo elemento, quindi è il pulsante di opzione selezionato per impostazione predefinita.
• Modifier.selectableGroup() garantisce un comportamento di accessibilità corretto per gli screen reader. Comunica al sistema che gli elementi all'interno di questo Column fanno parte di un gruppo selezionabile, il che consente un supporto adeguato per gli screen reader.
• Modifier.selectable() fa sì che l'intero Row agisca come un singolo elemento selezionato.
  • selected indica se l'Row corrente è selezionato in base allo statoselectedOption.
  • La funzione lambda onClick aggiorna lo stato selectedOption sull'opzione su cui è stato fatto clic quando si fa clic su Row.
  • role = Role.RadioButton informa i servizi di accessibilità che Row funziona come un pulsante di opzione.
• RadioButton(...) crea il composable RadioButton.
  • onClick = null sul RadioButton migliora l'accessibilità. In questo modo, il pulsante di opzione non gestisce direttamente l'evento di clic e consente al modificatore selectable di Row di gestire lo stato di selezione e il comportamento di accessibilità.

Risultato

Figura 2. Tre pulsanti di opzione con l'opzione "Amici" selezionata.

Risorse aggiuntive

• Material Design: pulsanti