Le composable Slider
permet aux utilisateurs de faire des sélections dans une plage de
valeurs. Vous pouvez utiliser un curseur pour permettre à l'utilisateur d'effectuer les opérations suivantes:
- Réglez les paramètres qui utilisent une plage de valeurs, comme le volume et la luminosité.
- Filtrez les données dans un graphique, comme lorsque vous définissez une gamme de prix.
- Entrées utilisateur, comme la définition d'une note dans un avis
Le curseur contient une piste, un curseur, un libellé de valeur et des coches:
- Tracé: il s'agit de la barre horizontale qui représente la fourchette de que le curseur peut prendre.
- Pouce: le curseur est un élément de contrôle que l'on peut faire glisser sur le curseur. permet à l'utilisateur de sélectionner une valeur spécifique dans la plage définie par le titre en question.
- Coches: les coches sont des marqueurs visuels facultatifs qui le long du curseur.
![Curseur avec le curseur, la trajectoire et les coches.](https://developer.android.com/static/develop/ui/compose/images/components/slider.png?authuser=5&hl=fr)
Implémentation de base
Consultez la documentation de référence sur Slider
pour obtenir une définition complète de l'API. Quelques éléments clés
paramètres du composable Slider
sont les suivants:
value
: valeur actuelle du curseur.onValueChange
: un lambda qui est appelé chaque fois que la valeur est modifié.enabled
: valeur booléenne indiquant si l'utilisateur peut interagir avec le curseur.
L'exemple suivant illustre un curseur simple. Cela permet à l'utilisateur
sélectionnez une valeur comprise entre 0.0
et 1.0
. Comme l'utilisateur peut sélectionner n'importe quelle valeur
pour cette plage, le curseur est en mode continu.
@Preview @Composable fun SliderMinimalExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it } ) Text(text = sliderPosition.toString()) } }
Cette implémentation est la suivante :
![Composant "Curseur" dont la valeur est sélectionnée à environ trois quarts le long de la trajectoire.](https://developer.android.com/static/develop/ui/compose/images/components/slider-basic.png?authuser=5&hl=fr)
Implémentation avancée
Lorsque vous implémentez un curseur plus complexe, vous pouvez également utiliser les paramètres suivants.
colors
: instance deSliderColors
qui vous permet de contrôler le couleurs du curseur.valueRange
: plage de valeurs pouvant être appliquée au curseur.steps
: nombre d'encoches sur le curseur auxquelles le curseur s'aligne.
L'extrait de code suivant implémente un curseur comportant trois étapes, avec une plage
de 0.0
à 50.0
. Comme le curseur s'aligne sur chaque pas, ce curseur est
discrète.
@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'implémentation se présente comme suit:
![Saisissez votre texte alternatif ici](https://developer.android.com/static/develop/ui/compose/images/components/slider-advanced.png?authuser=5&hl=fr)
Curseur de plage
Vous pouvez également utiliser le composable RangeSlider
dédié. Cela permet à l'utilisateur
sélectionner deux valeurs. Cela peut être utile lorsque, par exemple, l'utilisateur souhaite
sélectionnez un prix minimal et un prix maximal.
L'exemple suivant est un exemple relativement simple d'une structure curseur de plage.
@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()) } }
![Composant de curseur de plage avec deux valeurs sélectionnées. Un libellé affiche les limites supérieure et inférieure de la sélection.](https://developer.android.com/static/develop/ui/compose/images/components/slider-range.png?authuser=5&hl=fr)