Dispositivo di scorrimento

Il componibile Slider consente agli utenti di effettuare selezioni da un intervallo di e i relativi 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 cursore, un'etichetta del valore e delle tacche:

  • Traccia: la rotta è la barra orizzontale che rappresenta l'intervallo di valori che possono essere assunti dal dispositivo di scorrimento.
  • Pollice: il pollice è un elemento di controllo trascinabile sul dispositivo di scorrimento. consente all'utente di selezionare un valore specifico all'interno dell'intervallo definito traccia.
  • Segni di spunta: sono indicatori visivi o indicatori facoltativi che vengono visualizzati lungo la traccia del cursore.
Un dispositivo di scorrimento con pollice, tracciamento e segni di graduazione.
Figura 1. Un'implementazione di un dispositivo di scorrimento.

Implementazione di base

Per una definizione completa dell'API, consulta il riferimento di 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 è è cambiato.
  • enabled: un valore booleano che indica se l'utente può interagire con il cursore.

L'esempio seguente è un semplice cursore. Ciò consente all'utente di seleziona un valore compreso tra 0.0 e 1.0. Poiché l'utente può selezionare qualsiasi valore 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 è visualizzata come segue:

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

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 il 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 dispositivo di scorrimento con tre passaggi, con un intervallo dalle ore 0.0 alle ore 50.0. Poiché il pollice scatta su ogni passaggio, questo cursore discreta.

@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 il testo alternativo qui
Figura 3. Un cursore con passi e un intervallo di valori impostato.
di Gemini Advanced.

Dispositivo di scorrimento dell'intervallo

Puoi anche utilizzare il composable RangeSlider dedicato. Ciò consente all'utente di 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 una dispositivo di scorrimento dell'intervallo.

@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 cursore di intervallo con due valori selezionati. Un'etichetta mostra i limiti superiore e inferiore della selezione.
Figura 4. Un'implementazione di un dispositivo di scorrimento dell'intervallo.

Risorse aggiuntive