Dispositivo di scorrimento

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

  • Regolare le impostazioni che utilizzano un intervallo di valori, come volume e luminosità.
  • Filtrare i dati in un grafico, ad esempio quando si imposta una fascia di prezzo.
  • Inserire input utente, ad esempio impostare una valutazione in una recensione.

Il dispositivo di scorrimento contiene una traccia, un cursore, un'etichetta del valore e segni di graduazione:

  • Traccia: la traccia è la barra orizzontale che rappresenta l'intervallo di valori che il dispositivo di scorrimento può assumere.
  • Cursore: il cursore è 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 o marcatori visivi facoltativi che vengono visualizzati lungo la traccia del dispositivo di scorrimento.
Un cursore con pollice, traccia e segni di graduazione.
Figura 1. Un'implementazione di un dispositivo di scorrimento.

Implementazione di base

Consulta il Slider riferimento per una definizione completa dell'API. Di seguito sono riportati alcuni dei parametri chiave del componibile Slider:

  • value: il valore attuale del dispositivo di scorrimento.
  • 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 il dispositivo di scorrimento.

L'esempio seguente è un semplice dispositivo di scorrimento. Consente all'utente di selezionare un valore compreso tra 0.0 e 1.0. Poiché l'utente può selezionare qualsiasi valore in questo intervallo, il dispositivo di scorrimento è continuo.

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

Ecco come appare la barra:

Un componente cursore con un valore selezionato a circa tre quarti della traccia.
Figura 2. Un'implementazione di base di un dispositivo di scorrimento.

Implementazione avanzata

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

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

Il seguente snippet implementa un dispositivo di scorrimento con tre passaggi, con un intervallo da 0.0 a 50.0. Poiché il cursore si aggancia a 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

Ecco come appare l'implementazione:

Un cursore discreto 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, a indicare un valore selezionato di poco superiore a 16.
Figura 3. Un dispositivo di scorrimento con passaggi e un intervallo di valori impostato.

Cursore dell'intervallo

Puoi anche utilizzare il componibile RangeSlider dedicato. Consente all'utente di selezionare due valori. Può essere utile in casi come quando l'utente vuole selezionare un prezzo minimo e massimo.

L'esempio seguente è un esempio relativamente semplice di un cursore 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 cursore di intervallo con due valori selezionati. Un'etichetta mostra i limiti superiore e inferiore della selezione.
Figura 4. Un'implementazione di un cursore dell'intervallo.

Risorse aggiuntive