Dispositivo di scorrimento

L'elemento componibile Slider consente agli utenti di effettuare selezioni da un intervallo di valori. Puoi utilizzare un dispositivo di scorrimento per consentire all'utente di:

  • Consente di regolare le impostazioni che utilizzano una serie di valori, ad esempio volume e luminosità.
  • Filtra i dati in un grafico, come al momento dell'impostazione di una fascia di prezzo.
  • Input degli utenti, ad esempio l'impostazione di una valutazione in una recensione.

Il dispositivo di scorrimento contiene una traccia, un pollice, un'etichetta valore e segni di spunta:

  • Traccia: la traccia è la barra orizzontale che rappresenta l'intervallo di valori che può essere utilizzato dal cursore.
  • Pollice: è un elemento di controllo trascinabile sul dispositivo di scorrimento che consente all'utente di selezionare un valore specifico all'interno dell'intervallo definito dalla traccia.
  • Segni di graduazione: i segni di graduazione sono indicatori visivi o indicatori facoltativi che compaiono lungo la traccia del cursore.
Un dispositivo di scorrimento con il pollice, la traccia e i segni di graduazione.
Figura 1. L'implementazione di un cursore.

Implementazione di base

Consulta il riferimento Slider per una definizione completa dell'API. Ecco alcuni dei parametri chiave dell'elemento componibile Slider:

  • value: il valore corrente del dispositivo di scorrimento.
  • onValueChange: una funzione lambda che viene richiamata ogni volta che il valore viene modificato.
  • enabled: un valore booleano che indica se l'utente può interagire con il dispositivo di scorrimento.

L'esempio seguente è un semplice dispositivo di scorrimento. Ciò consente all'utente di selezionare un valore compreso tra 0.0 e 1.0. Poiché l'utente può selezionare qualsiasi valore in quell'intervallo, il cursore è continua.

@Preview
@Composable
fun SliderMinimalExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it }
        )
        Text(text = sliderPosition.toString())
    }
}
Slider.kt

Questa implementazione si presenta come segue:

Un componente dispositivo di scorrimento con un valore selezionato all'incirca tre quarti lungo la traccia.
Figura 2. L'implementazione di base di un cursore.

Implementazione avanzata

Quando implementi un dispositivo di scorrimento più complesso, puoi utilizzare anche i seguenti parametri.

  • colors: un'istanza di SliderColors che ti consente di controllare i colori del dispositivo di scorrimento.
  • valueRange: l'intervallo di valori supportato dal dispositivo di scorrimento.
  • steps: il numero di tacche sul cursore a cui aggancia il pollice.

Lo snippet seguente implementa un dispositivo di scorrimento con tre passaggi, con un intervallo compreso tra 0.0 e 50.0. Poiché il pollice scatta su ogni passaggio, questo dispositivo di scorrimento è discreto.

@Preview
@Composable
fun SliderAdvancedExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it },
            colors = SliderDefaults.colors(
                thumbColor = MaterialTheme.colorScheme.secondary,
                activeTrackColor = MaterialTheme.colorScheme.secondary,
                inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer,
            ),
            steps = 3,
            valueRange = 0f..50f
        )
        Text(text = sliderPosition.toString())
    }
}
Slider.kt

L'implementazione è la seguente:

Scrivi qui il testo alternativo
Figura 3. Un cursore con passaggi e un intervallo di valori impostato.

Dispositivo di scorrimento dell'intervallo

Puoi anche utilizzare l'elemento componibile RangeSlider dedicato. Ciò consente all'utente di selezionare due valori. Questo può essere utile in casi come quando l'utente vuole selezionare un prezzo minimo e un prezzo massimo.

L'esempio seguente è un esempio relativamente semplice di dispositivo di scorrimento dell'intervallo continuo.

@Preview
@Composable
fun RangeSliderExample() {
    var sliderPosition by remember { mutableStateOf(0f..100f) }
    Column {
        RangeSlider(
            value = sliderPosition,
            steps = 5,
            onValueChange = { range -> sliderPosition = range },
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
                // viewModel.updateSelectedSliderValue(sliderPosition)
            },
        )
        Text(text = sliderPosition.toString())
    }
}
Slider.kt

Un componente del dispositivo di scorrimento di intervallo con due valori selezionati. Un'etichetta mostra il limite superiore e inferiore della selezione.
Figura 4. Un'implementazione di un cursore dell'intervallo.

Risorse aggiuntive