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 è possibile selezionare un solo elemento da un elenco. Se gli utenti devono selezionare più di un elemento, utilizza invece un controllo di attivazione/disattivazione.

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

Piattaforma API

Utilizza il componibile RadioButton per elencare le opzioni disponibili. Racchiudi 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 l'app esegue quando l'utente fa clic sul pulsante di opzione. Se è null, l'utente non può interagire direttamente con il pulsante di opzione.
• 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 il mouse è posizionato sopra o se è attivo.

Crea 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 sul 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 selezionata.
  • mutableStateOf(radioOptions[0]) inizializza lo stato sul primo elemento dell'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. Informa il sistema che gli elementi all'interno di questo Column fanno parte di un gruppo selezionabile, il che consente un supporto adeguato dello screen reader.
• Modifier.selectable() fa sì che l'intero Row agisca come un singolo elemento selezionabile.
  • selected indica se l'elemento Row corrente è selezionato in base allo stato di selectedOption.
  • La funzione lambda onClick aggiorna lo stato selectedOption all'opzione selezionata quando viene fatto 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 su RadioButton migliora l'accessibilità. In questo modo, il pulsante di opzione non gestisce direttamente l'evento di clic e il modificatore selectable di Row può 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: Buttons