Schieberegler

Mit der zusammensetzbaren Funktion Slider können Nutzer eine Auswahl aus einem Wertebereich treffen. Sie können einen Schieberegler verwenden, um dem Nutzer Folgendes zu ermöglichen:

  • Passen Sie die Einstellungen mit verschiedenen Werten wie Lautstärke und Helligkeit an.
  • Filtern Sie Daten in einem Diagramm wie beim Festlegen einer Preisspanne.
  • Nutzereingaben, z. B. das Festlegen einer Bewertung in einer Rezension

Der Schieberegler enthält einen Track, einen Daumen, ein Wertelabel und Backticks:

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

Einfache Implementierung

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

  • value: Der aktuelle Wert des Schiebereglers.
  • onValueChange: Lambda, das bei jeder Änderung des Werts aufgerufen wird.
  • enabled: Ein boolescher Wert, der angibt, ob der Nutzer mit dem Schieberegler interagieren kann.

Das folgende Beispiel zeigt einen einfachen Schieberegler. Dadurch kann der Nutzer einen Wert von 0.0 bis 1.0 auswählen. Da der Nutzer einen beliebigen Wert in diesem Bereich auswählen kann, ist 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:

Ein Schieberegler mit einem Wert, der auf etwa drei Viertel der Strecke ausgewählt wird.
Abbildung 2: Eine 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 Einkerbungen auf dem Schieberegler, an denen der Daumen einrastet.

Im folgenden Snippet wird ein Schieberegler implementiert, der aus drei Schritten besteht und von 0.0 bis 50.0 reicht. Da der Daumen bei jedem Schritt andockt, 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.

Bereichsschieberegler

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

Das folgende Beispiel ist ein relativ einfaches Beispiel für einen fortlaufenden 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

Ein Bereichsschieberegler mit zwei ausgewählten Werten Ein Label zeigt die Ober- und Untergrenzen der Auswahl an.
Abbildung 4: Implementierung eines Bereichsschiebereglers.

Zusätzliche Ressourcen