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.

Figura 1. Un pulsante di selezione singola (1) e un pulsante di selezione multipla (2).

API surface

Utilizza i layout SingleChoiceSegmentedButtonRow e MultiChoiceSegmentedButtonRow per creare pulsanti segmentati. Questi layout assicurano che i SegmentedButton siano posizionati e dimensionati correttamente e condividono i seguenti parametri chiave:

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

Creare un pulsante segmentato con una sola opzione di selezione

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 attualmente selezionato.
• Definisce un elenco di options che rappresentano le etichette dei pulsanti.
• SingleChoiceSegmentedButtonRow garantisce che sia possibile 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 numero totale di opzioni che utilizzano SegmentedButtonDefaults.itemShape.
  • onClick aggiorna selectedIndex con l'indice del pulsante su cui è stato fatto clic.
  • selected imposta lo stato di selezione del pulsante in base a selectedIndex.
  • label mostra l'etichetta del pulsante utilizzando il componibile Text.

Risultato

Figura 2. Un pulsante di selezione singola con un'opzione selezionata.

Creare un pulsante segmentato con 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. Viene monitorato lo stato selezionato di ciascun 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 attivazione del pulsante in base al valore corrispondente in selectedOptions.
  • onCheckedChange attiva/disattiva lo stato selezionato dell'elemento corrispondente in selectedOptions quando si fa clic sul pulsante.
  • icon mostra un'icona in base a SegmentedButtonDefaults.Icon e allo stato di attivazione del pulsante.
  • label mostra un'icona corrispondente all'etichetta, utilizzando elementi componibili Icon con vettori di immagini e descrizioni dei contenuti appropriati.

Risultato

Figura 2. Un pulsante segmentato con selezione multipla con due opzioni selezionate.

Risorse aggiuntive

• Materiale 3: Pulsanti segmentati