Le composable Slider
permet aux utilisateurs de faire des sélections à partir d'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é.
- filtrer les données dans un graphique, comme lorsque vous définissez une gamme de prix ;
- Les informations saisies par l'utilisateur, comme l'ajout d'une note dans un avis.
Le curseur contient une piste, un curseur, un libellé de valeur et des coches:
- Tracé: la barre horizontale représente la plage de valeurs que le curseur peut accepter.
- Pouce: le curseur est un élément de commande déplaçable sur le curseur, qui permet à l'utilisateur de sélectionner une valeur spécifique dans la plage définie par le titre.
- Coches: les coches sont des repères visuels facultatifs ou des indicateurs qui apparaissent le long de la piste du curseur.
Implémentation de base
Consultez la documentation de référence sur Slider
pour une définition complète de l'API. Voici certains des paramètres clés du composable Slider
:
value
: valeur actuelle du curseur.onValueChange
: lambda qui est appelé à chaque fois que la valeur est modifiée.enabled
: valeur booléenne indiquant si l'utilisateur peut interagir avec le curseur.
L'exemple suivant présente un curseur simple. Cela permet à l'utilisateur de sélectionner une valeur comprise entre 0.0
et 1.0
. Comme l'utilisateur peut sélectionner n'importe quelle valeur dans cette plage, le curseur est 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 :
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 les couleurs du curseur.valueRange
: plage de valeurs que le curseur peut prendre.steps
: nombre d'encoches sur le curseur auxquelles le pouce s'ajuste.
L'extrait de code suivant implémente un curseur à trois étapes, avec une plage allant de 0.0
à 50.0
. Comme le curseur s'ajuste à chaque pas, ce curseur est discret.
@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:
Curseur de plage
Vous pouvez également utiliser le composable RangeSlider
dédié. Cela permet à l'utilisateur de
sélectionner deux valeurs. Cela peut être utile dans les cas où l'utilisateur souhaite sélectionner un prix minimal et maximal.
L'exemple suivant est un exemple relativement simple de curseur de plage continue.
@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()) } }