Il componibile Slider
consente agli utenti di effettuare selezioni da un intervallo di
valori. Puoi utilizzare un dispositivo di scorrimento per consentire all'utente di eseguire le seguenti operazioni:
- Consente di regolare le impostazioni che utilizzano una serie di valori, ad esempio volume e luminosità.
- Filtrare i dati in un grafico, ad esempio durante l'impostazione di una fascia di prezzo.
- Input utente, ad esempio l'impostazione di una valutazione in una recensione.
Il cursore contiene una traccia, un pollice, un'etichetta per il valore e dei segni di graduazione:
- Traccia: la traccia è la barra orizzontale che rappresenta l'intervallo di valori che il dispositivo di scorrimento può assumere.
- Pollice: il 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 vengono visualizzati lungo la traccia del cursore.
Implementazione di base
Per una definizione completa dell'API, consulta il riferimento di Slider
. Alcuni dei parametri chiave per il componibile Slider
sono i seguenti:
value
: il valore corrente del cursore.onValueChange
: una funzione lambda che viene chiamata ogni volta che viene modificato il valore.enabled
: un valore booleano che indica se l'utente può interagire con il dispositivo di scorrimento.
L'esempio seguente è un semplice cursore. 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()) } }
Questa implementazione si presenta nel seguente modo:
Implementazione avanzata
Quando implementi un dispositivo di scorrimento più complesso, puoi utilizzare anche i seguenti parametri.
colors
: un'istanza diSliderColors
che consente di controllare i colori del cursore.valueRange
: l'intervallo di valori che può assumere il cursore.steps
: il numero di tacche sul cursore su cui scatta il pollice.
Lo snippet seguente implementa un cursore con tre passaggi, con un intervallo compreso tra 0.0
e 50.0
. Poiché il pollice scatta su ogni passaggio, questo cursore è
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()) } }
L'implementazione si presenta come segue:
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 nei casi, ad esempio, quando l'utente vuole
selezionare un prezzo minimo e massimo.
L'esempio seguente è un esempio relativamente semplice di 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()) } }