Curseur

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 :

  • Ajustez les paramètres qui utilisent une plage de valeurs, comme le volume et la luminosité.
  • Filtrer les données d'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:

  • Rail : rail horizontal qui représente la plage de valeurs que le curseur peut prendre.
  • Poussoir : élément de commande du curseur qui permet à l'utilisateur de sélectionner une valeur spécifique dans la plage définie par le rail.
  • Coches: les coches sont des marqueurs visuels facultatifs qui le long du curseur.
Curseur avec le curseur, la trajectoire et les coches.
Figure 1. Implémentation d'un curseur.

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 est 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())
    }
}
Slider.kt

Cette implémentation est la suivante :

Composant "Curseur" dont la valeur est sélectionnée à environ trois quarts le long de la trajectoire.
Figure 2. Implémentation de base d'un curseur

Implémentation avancée

Lorsque vous implémentez un curseur plus complexe, vous pouvez également utiliser les paramètres suivants.

  • colors: instance de SliderColors qui vous permet de contrôler le couleurs du curseur.
  • valueRange: plage de valeurs pouvant être appliquée au curseur.
  • steps : nombre de repères sur le curseur auxquels le bouton bascule s'enclenche.

L'extrait de code suivant implémente un curseur à 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())
    }
}
Slider.kt

L'implémentation se présente comme suit :

Saisissez votre texte alternatif ici
Figure 3. Curseur avec des pas et une plage de valeurs définie.

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, par exemple, lorsque l'utilisateur souhaite sélectionner un prix minimal et 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())
    }
}
Slider.kt

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.
Figure 4. Implémentation d'un curseur de plage.

Ressources supplémentaires