Schieberegler

Mit dem Slider-Komposit können Nutzer aus einer Reihe von Werten auswählen. Mit einem Schieberegler können Sie Nutzern Folgendes ermöglichen:

  • Einstellungen anpassen, die einen Wertebereich verwenden, z. B. Lautstärke und Helligkeit
  • Daten in einem Diagramm filtern, z. B. durch Festlegen eines Preisbereichs
  • Nutzereingaben, z. B. das Festlegen einer Bewertung in einer Rezension

Der Schieberegler enthält einen Track, einen Schieberegler, ein Wertlabel und Markierungen:

  • Track: Der Track ist der horizontale Balken, der den Bereich der Werte darstellt, die der Schieberegler haben 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.
  • Markierungen: Markierungen sind optionale visuelle Markierungen oder Indikatoren, die entlang 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 Slider-Referenz. Zu den wichtigsten Parametern für die Slider-Komposition gehören:

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

Das folgende Beispiel zeigt einen einfachen Schieberegler. So 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 Fortlaufend.

@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 Schiebereglerkomponente mit einem Wert, der etwa drei Viertel entlang des Tracks ausgewählt ist.
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 haben kann.
  • steps: Die Anzahl der Einkerbungen auf dem Schieberegler, an denen der Daumen einrastet.

Im folgenden Snippet wird ein Schieberegler mit drei Schritten und einem Bereich von 0.0 bis 50.0 implementiert. Da der Schieberegler an jedem Schritt anhält, ist er 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 spezielle RangeSlider-Komponente verwenden. So können Nutzende zwei Werte auswählen. Das kann beispielsweise nützlich sein, wenn der Nutzer einen Mindest- und einen Höchstpreis auswählen möchte.

Das folgende Beispiel ist ein relativ einfaches Beispiel für einen Schieberegler mit kontinuierlichem Bereich.

@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 Untergrenze der Auswahl an.
Abbildung 4: Eine Implementierung eines Schiebereglers für einen Bereich.

Weitere Informationen