Mit der zusammensetzbaren Funktion Slider
können Nutzer aus einer Reihe von
Werte. Sie können einen Schieberegler verwenden, um dem Nutzer Folgendes zu ermöglichen:
- Einstellungen anpassen, die einen Wertebereich verwenden, z. B. Lautstärke und Helligkeit
- 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: Der Track ist der horizontale Balken, der die Werte, die der Schieberegler annehmen kann.
- Daumen: Der Daumen ist ein ziehbares Steuerelement auf dem Schieberegler, über das ermöglicht es dem Benutzer, einen bestimmten Wert innerhalb des durch das Titel.
- Teilstriche: Backticks sind optionale visuelle Markierungen oder Indikatoren, die werden entlang der Spur des Schiebereglers angezeigt.
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
: Boolescher Wert, der angibt, ob der Nutzer mit auf den Schieberegler.
Das folgende Beispiel zeigt einen einfachen Schieberegler. So können Nutzende
Wählen Sie einen Wert zwischen 0.0
und 1.0
aus. Da der Nutzer einen beliebigen Wert
Bereich bewegt, steht der Schieberegler auf Fortlaufend.
@Preview @Composable fun SliderMinimalExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it } ) Text(text = sliderPosition.toString()) } }
Diese Implementierung sieht so aus:
Erweiterte Implementierung
Wenn Sie einen komplexeren Schieberegler implementieren, können Sie zusätzlich die folgenden Parameter verwenden.
colors
: Eine Instanz vonSliderColors
, 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.
Mit dem folgenden Snippet wird ein Schieberegler implementiert, der drei Schritte umfasst,
von 0.0
bis 50.0
. 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()) } }
Die Implementierung sieht so aus:
Bereichsschieberegler
Sie können auch die dedizierte zusammensetzbare Funktion RangeSlider
verwenden. So können Nutzende
wählen Sie zwei Werte aus. 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 eine stetige Schieberegler.
@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()) } }