Schieberegler

Mit der zusammensetzbaren Funktion Slider können Nutzer eine Auswahl aus einem Wertebereich treffen. Mit einem Schieberegler können Sie dem Nutzer folgende Aktionen ermöglichen:

  • Passe Einstellungen mit einem Wertebereich an, z. B. Lautstärke und Helligkeit.
  • Sie können Daten in einer Grafik wie beim Festlegen einer Preisspanne filtern.
  • Nutzereingaben, z. B. das Festlegen einer Bewertung in einer Rezension

Der Schieberegler enthält eine Spur, einen Daumen, ein Wertelabel und Teilstriche:

  • Track: Die Spur ist der horizontale Balken, der den Wertebereich darstellt, den der Schieberegler erfassen kann.
  • Mag ich: Der Daumen ist ein ziehbares Steuerelement auf dem Schieberegler, mit dem der Nutzer einen bestimmten Wert innerhalb des durch die Spur definierten Bereichs auswählen kann.
  • Kickmarkierungen: Häkchen sind optionale visuelle Markierungen oder Indikatoren, die entlang der Spur des Schiebereglers eingeblendet werden.
Ein Schieberegler mit Daumen, Spur und Teilstrichen.
Abbildung 1. Implementierung eines Schiebereglers.

Einfache Implementierung

Die vollständige API-Definition finden Sie in der Slider-Referenz. Einige der Schlüsselparameter für die zusammensetzbare Funktion Slider sind:

  • value: Der aktuelle Wert des Schiebereglers.
  • onValueChange: Eine Lambda-Funktion, die jedes Mal aufgerufen wird, wenn der Wert geändert wird.
  • enabled: Ein boolescher Wert, der angibt, ob der Nutzer mit dem Schieberegler interagieren kann.

Das folgende Beispiel zeigt einen einfachen Schieberegler. Der Nutzer kann also einen Wert von 0.0 bis 1.0 auswählen. Da der Nutzer einen beliebigen Wert in diesem Bereich auswählen kann, bleibt der Schieberegler kontinuierlich.

@Preview
@Composable
fun SliderMinimalExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it }
        )
        Text(text = sliderPosition.toString())
    }
}
Slider.kt

Diese Implementierung sieht so aus:

Eine Schieberegler-Komponente mit einem Wert, der etwa drei Viertel entlang des Tracks ausgewählt ist.
Abbildung 2: Einfache Implementierung eines Schiebereglers.

Erweiterte Implementierung

Wenn Sie einen komplexeren Schieberegler implementieren, können Sie zusätzlich die folgenden Parameter verwenden.

  • colors: Eine Instanz von SliderColors, mit der Sie die Farben des Schiebereglers steuern können.
  • valueRange: Der Wertebereich, den der Schieberegler annehmen kann.
  • steps: Anzahl der Einkerbungen auf dem Schieberegler, in die der Daumen einrastet.

Mit dem folgenden Snippet wird ein Schieberegler mit drei Schritten implementiert, der von 0.0 bis 50.0 reicht. Da der Daumen bei jedem Schritt anspringt, ist dieser Schieberegler diskret.

@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

Die Implementierung sieht so aus:

Alt-Text hier eingeben
Abbildung 3: Ein Schieberegler mit Schritten und einem festgelegten Wertebereich.

Schieberegler für Bereich

Sie können auch die dedizierte zusammensetzbare Funktion RangeSlider verwenden. So können Nutzende zwei Werte auswählen. Dies kann nützlich sein, wenn der Nutzer beispielsweise einen Mindest- und Höchstpreis auswählen möchte.

Das folgende Beispiel ist ein relativ einfaches Beispiel für einen Schieberegler für kontinuierliche Bereiche.

@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

Eine Bereichsschieberegler-Komponente mit zwei ausgewählten Werten. Ein Label zeigt die Ober- und Untergrenze der Auswahl an.
Abbildung 4: Eine Implementierung eines Bereichsreglers.

Weitere Informationen