Dispositivo di scorrimento

Il composable Slider consente agli utenti di effettuare selezioni da un intervallo di valori. Puoi utilizzare un cursore per consentire all'utente di:

  • Regolare le impostazioni che utilizzano un intervallo di valori, ad esempio il volume e la luminosità.
  • Filtrare i dati in un grafico, ad esempio quando imposti una fascia di prezzo.
  • Input dell'utente, ad esempio l'impostazione di una valutazione in una recensione.

Il cursore contiene una barra, un cursore, un'etichetta del valore e dei segni di graduazione:

  • Traccia: la traccia è la barra orizzontale che rappresenta l'intervallo di valori che il cursore può assumere.
  • Cursore: il cursore è un elemento di controllo trascinabile sullo slider che consente all'utente di selezionare un valore specifico all'interno dell'intervallo definito dalla barra.
  • Segni di graduazione: i segni di graduazione sono indicatori visivi facoltativi che vengono visualizzati lungo la traccia dello slider.
Un cursore con cursore, traccia e segni di graduazione.
Figura 1. Implementazione di uno slider.

Implementazione di base

Per una definizione completa dell'API, consulta il riferimento Slider. Alcuni dei parametri chiave per il componibile Slider sono i seguenti:

  • value: il valore corrente del cursore.
  • onValueChange: un'espressione lambda che viene chiamata ogni volta che il valore viene modificato.
  • enabled: un valore booleano che indica se l'utente può interagire con lo slider.

L'esempio seguente è uno slider semplice. 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 è continuo.

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

Ecco come appare la barra:

Un componente di scorrimento con un valore selezionato a circa tre quarti della barra.
Figura 2. Un'implementazione di base di uno slider.

Implementazione avanzata

Quando implementi uno slider più complesso, puoi utilizzare anche i seguenti parametri.

  • colors: un'istanza di SliderColors che ti consente di controllare i colori dello slider.
  • valueRange: l'intervallo di valori che il cursore può assumere.
  • steps: il numero di tacche sul cursore a cui si aggancia il cursore.

Il seguente snippet implementa uno slider con tre passaggi, con un intervallo compreso tra 0.0 e 50.0. Poiché il cursore si aggancia a ogni passo, 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())
    }
}

Ecco come appare l'implementazione:

Un dispositivo di scorrimento separato con un intervallo da 0 a 50, che mostra cinque segni di graduazione a intervalli uguali. Il cursore è posizionato vicino al secondo segno di graduazione, indicando un valore selezionato di 16.
Figura 3. Un cursore con passaggi e un intervallo di valori impostato.

Cursore dell'intervallo

Puoi anche utilizzare il composable RangeSlider dedicato. In questo modo, l'utente può selezionare due valori. Questo può essere utile, ad esempio, quando l'utente vuole selezionare un prezzo minimo e uno massimo.

L'esempio seguente è un esempio relativamente semplice di un cursore di 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())
    }
}

Un componente cursore intervallo con due valori selezionati. Un'etichetta mostra i limiti superiore e inferiore della selezione.
Figura 4. Implementazione di un cursore dell'intervallo.

Risorse aggiuntive