Il composable 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:
- Regola le impostazioni che utilizzano un intervallo di valori, ad esempio il volume e la luminosità.
- Filtrare i dati in un grafico, ad esempio durante l'impostazione di una fascia di prezzo.
- Input dell'utente, ad esempio l'impostazione di una valutazione in una recensione.
Il cursore contiene una traccia, un cursore, un'etichetta del valore e delle tacche:
- Canale: il canale è la barra orizzontale che rappresenta l'intervallo di valori che può assumere il dispositivo di scorrimento.
- 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.
- Barre di misura: le barre di misura sono indicatori o indicatori visivi facoltativi che compaiono lungo la barra del cursore.
Implementazione di base
Per una definizione completa dell'API, consulta il riferimento Slider
. Ecco alcuni dei parametri chiave per il composable Slider
:
value
: il valore corrente del dispositivo di scorrimento.onValueChange
: una funzione lambda che viene chiamata ogni volta che il valore viene cambiato.enabled
: un valore booleano che indica se l'utente può interagire con il cursore.
L'esempio seguente è un semplice cursore. In questo modo l'utente può 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()) } }
Questa implementazione è visualizzata come segue:
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 dispositivo di scorrimento.steps
: il numero di tacche sul cursore a cui si aggancia il pollice.
Il seguente snippet implementa un cursore con tre livelli, con un intervallo da 0.0
a 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 il composable RangeSlider
dedicato. In questo modo l'utente può selezionare due valori. Ciò può essere utile, ad esempio, quando l'utente vuole selezionare un prezzo minimo e massimo.
L'esempio seguente è un esempio relativamente semplice di un cursore con 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()) } }