Pulsante segmentato

Utilizza un pulsante segmentato per consentire agli utenti di scegliere tra un insieme di opzioni affiancate. Esistono due tipi di pulsanti segmentati:

  • Pulsante di selezione singola: consente agli utenti di scegliere un'opzione.
  • Pulsante di selezione multipla: consente agli utenti di scegliere tra due e cinque elementi. Per scelte più complesse o più di cinque elementi, utilizza i chip.
Viene visualizzato un componente pulsante segmentato. Il primo pulsante consente una sola selezione, mentre il secondo pulsante consente selezioni multiple.
Figura 1. Un pulsante di selezione singola (1) e un pulsante di selezione multipla (2).

Piattaforma API

Utilizza i layout SingleChoiceSegmentedButtonRow e MultiChoiceSegmentedButtonRow per creare pulsanti segmentati. Questi layout posizionano e dimensionano correttamente i SegmentedButton e condividono i seguenti parametri chiave:

  • space: regola la sovrapposizione tra i pulsanti.
  • content: contiene il contenuto della riga di pulsanti segmentati, che in genere è una sequenza di SegmentedButton.

Creare un pulsante segmentato a selezione singola

Questo esempio mostra come creare un pulsante segmentato a selezione singola:

@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val options = listOf("Day", "Month", "Week")

    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex,
                label = { Text(label) }
            )
        }
    }
}
SegmentedButton.kt

Punti chiave del codice

  • Inizializza una variabile selectedIndex utilizzando remember e mutableIntStateOf per monitorare l'indice del pulsante selezionato.
  • Definisce un elenco di options che rappresentano le etichette dei pulsanti.
  • SingleChoiceSegmentedButtonRow ti consente di selezionare un solo pulsante.
  • Crea un SegmentedButton per ogni opzione all'interno del ciclo forEachIndexed:
    • shape definisce la forma del pulsante in base al suo indice e al conteggio totale delle opzioni utilizzando SegmentedButtonDefaults.itemShape.
    • onClick updates selectedIndex with the clicked button's index.
    • selected imposta lo stato di selezione del pulsante in base a selectedIndex.
    • label mostra l'etichetta del pulsante utilizzando il componibile Text.

Risultato

Viene visualizzato un componente pulsante segmentato con le opzioni Giorno, Mese e Settimana. L'opzione Giorno è attualmente selezionata.
Figura 2. Un pulsante di selezione singola con un'opzione selezionata.

Creare un pulsante segmentato a selezione multipla

Questo esempio mostra come creare un pulsante segmentato a scelta multipla con icone che consente agli utenti di selezionare più opzioni:

@Composable
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
    val selectedOptions = remember {
        mutableStateListOf(false, false, false)
    }
    val options = listOf("Walk", "Ride", "Drive")

    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                checked = selectedOptions[index],
                onCheckedChange = {
                    selectedOptions[index] = !selectedOptions[index]
                },
                icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },
                label = {
                    when (label) {
                        "Walk" -> Icon(
                            imageVector =
                            Icons.AutoMirrored.Filled.DirectionsWalk,
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsBus,
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsCar,
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}
SegmentedButton.kt

Punti chiave del codice

  • Il codice inizializza la variabile selectedOptions utilizzando remember e mutableStateListOf. Questo monitora lo stato selezionato di ogni pulsante.
  • Il codice utilizza MultiChoiceSegmentedButtonRow per contenere i pulsanti.
  • All'interno del ciclo forEachIndexed, il codice crea un SegmentedButton per ogni opzione:
    • shape definisce la forma del pulsante in base al suo indice e al numero totale di opzioni.
    • checked imposta lo stato di selezione del pulsante in base al valore corrispondente in selectedOptions.
    • onCheckedChange attiva/disattiva lo stato selezionato dell'elemento corrispondente in selectedOptions quando viene fatto clic sul pulsante.
    • icon mostra un'icona in base a SegmentedButtonDefaults.Icon e allo stato di selezione del pulsante.
    • label mostra un'icona corrispondente all'etichetta, utilizzando i componibili Icon con vettori di immagini e descrizioni dei contenuti appropriati.

Risultato

Viene visualizzato un componente pulsante segmentato con le opzioni A piedi, In bici e In auto. Al momento sono selezionate le opzioni A piedi e In bici.
Figura 3. Un pulsante segmentato a selezione multipla con due opzioni selezionate.

Risorse aggiuntive