Schieberegler

Mit der Slider zusammensetzbaren Funktion können Nutzer eine Auswahl aus einem Wertebereich von Werten treffen. Sie können einen Schieberegler verwenden, damit Nutzer Folgendes tun können:

Einstellungen anpassen, die einen Wertebereich verwenden, z. B. Lautstärke und Helligkeit.
Daten in einem Diagramm filtern, z. B. beim Festlegen einer Preisspanne.
Nutzereingaben, z. B. eine Bewertung in einer Rezension festlegen.

Der Schieberegler enthält eine Spur, einen Schieber, ein Wertlabel und Markierungen:

Spur: Die Spur ist der horizontale Balken, der den Wertebereich darstellt, den der Schieberegler annehmen kann.
Schieber: Der Schieber ist ein verschiebbares Steuerelement auf dem Schieberegler, mit dem der Nutzer einen bestimmten Wert innerhalb des durch die Spur definierten Bereichs auswählen kann.
Markierungen: Markierungen sind optionale visuelle Marker oder Indikatoren, die entlang der Spur des Schiebereglers angezeigt werden.

Ein Schieberegler mit Ziehpunkt, Pfad und Markierungen. — **Abbildung 1.** Implementierung eines Schiebereglers

Einfache Implementierung

Eine vollständige API-Definition finden Sie in der Slider Referenz. Einige der wichtigsten Parameter für die zusammensetzbare Funktion Slider sind:

value: Der aktuelle Wert des Schiebereglers.
onValueChange: Ein Lambda, das 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. Damit kann der Nutzer einen Wert zwischen 0.0 und 1.0 auswählen. Da der Nutzer einen beliebigen Wert in diesem Bereich auswählen kann, ist der Schieberegler stufenlos.

@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 des Schiebereglers entfernt vom linken Ende ausgewählt wurde. — **Abbildung 2** Einfache Implementierung eines Schiebereglers

Erweiterte Implementierung

Bei der Implementierung eines komplexeren Schiebereglers 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: Die Anzahl der Stufen auf dem Schieberegler, an denen der Schieber einrastet.

Das folgende Snippet implementiert einen Schieberegler mit drei Stufen und einem Bereich von 0.0 bis 50.0. Da der Schieber an jeder Stufe einrastet, 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:

Ein diskreter Schieberegler mit einem Bereich von 0 bis 50 und fünf Markierungen in gleichen Abständen. Der Daumen befindet sich in der Nähe der zweiten Markierung, was einen ausgewählten Wert von 16 bedeutet. — **Abbildung 3.** Ein Schieberegler mit Stufen und einem festgelegten Wertebereich

Bereichsschieberegler

Sie können auch die spezielle zusammensetzbare Funktion RangeSlider verwenden. Damit kann der Nutzer zwei Werte auswählen. Das kann in Fällen nützlich sein, in denen der Nutzer beispielsweise einen Mindest- und Höchstpreis auswählen möchte.

Das folgende Beispiel ist ein relativ einfaches Beispiel für einen stufenlosen Bereichsschieberegler.

@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** Implementierung eines Bereichsschiebereglers

Zusätzliche Ressourcen

Material UI-Dokumentation