Curseur

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 :

  • Ajustez les paramètres qui utilisent une plage de valeurs, comme le volume et la luminosité.
  • Filtrer les données d'un graphique, par exemple pour définir une gamme de prix.
  • Saisie de l'utilisateur, comme la définition d'une note dans un avis.

Le curseur contient une piste, un curseur, une étiquette de valeur et des graduations :

  • Piste : la piste est la barre horizontale qui représente la plage de valeurs que le curseur peut prendre.
  • Curseur : le curseur est un élément de contrôle déplaçable sur le curseur qui permet à l'utilisateur de sélectionner une valeur spécifique dans la plage définie par la piste.
  • Graduations : les graduations sont des repères ou des indicateurs visuels facultatifs qui apparaissent le long de la piste du curseur.
Curseur avec curseur, conteneur et graduations.
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. Voici quelques-uns des principaux paramètres du composable Slider :

  • value : valeur actuelle du curseur.
  • onValueChange : lambda appelé chaque fois que la valeur est modifiée.
  • enabled : valeur booléenne qui indique si l'utilisateur peut interagir avec le curseur.

L'exemple suivant est un curseur simple. Il 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 :

Composant de curseur avec une valeur sélectionnée à environ trois quarts de la piste.
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 les couleurs du curseur.
  • valueRange : plage de valeurs que le curseur peut prendre.
  • steps : nombre de crans sur le curseur auxquels le curseur s'accroche.

L'extrait de code suivant implémente un curseur en trois étapes, avec une plage de 0.0 à 50.0. Comme le curseur s'aligne sur chaque étape, il 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 est la suivante :

Curseur discret avec une plage de 0 à 50, affichant cinq graduations à intervalles égaux. Le curseur est positionné près du deuxième repère, ce qui indique une valeur sélectionnée de 16.
Figure 3. Un curseur avec des étapes 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 de curseur de plage continu.

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

Ressources supplémentaires