Suwak

Funkcja kompozycyjna Slider umożliwia użytkownikom wybranie zakresu . Możesz użyć suwaka, aby pozwolić użytkownikowi na:

  • Dostosuj ustawienia używające zakresu wartości, takich jak głośność i jasność.
  • Filtrowanie danych na wykresie, podobnie jak przy ustalaniu przedziału cenowego.
  • Dane wejściowe użytkownika, np. ocena w opinii.

Suwak zawiera ścieżkę dźwiękową, ikonę kciuka, etykietę wartości i znaczniki:

  • Ścieżka: poziomy pasek reprezentujący zakres dostępne przez suwak.
  • Kciuk: kciuk to możliwy do przeciągania element sterujący na suwaku, który pozwala użytkownikowi wybrać konkretną wartość z zakresu zdefiniowanego przez śledzić.
  • Znaczniki: to opcjonalne znaczniki wizualne lub wskaźniki, które są wyświetlane na ścieżce suwaka.
.
Suwak ze znacznikami kciuka, ścieżki i znaczników.
Rysunek 1. Implementacja suwaka.

Implementacja podstawowa

Pełną definicję interfejsu API znajdziesz w dokumentacji Slider. Niektóre ważne dla funkcji kompozycyjnej Slider są te parametry:

  • value – bieżąca wartość suwaka.
  • onValueChange: funkcja lambda, która jest wywoływana za każdym razem, gdy wartość jest została zmieniona.
  • enabled: wartość logiczna wskazująca, czy użytkownik może wchodzić w interakcję z: użyj suwaka.

Poniższy przykład to prosty suwak. Dzięki temu użytkownik może wybierz wartość od 0.0 do 1.0. Użytkownik może wybrać dowolną wartość w argumencie ten zakres, suwak jest ciągły.

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

Implementacja wygląda tak:

Komponent suwaka z wartością wybraną w około trzech czwartych wzdłuż ścieżki.
Rysunek 2. Podstawowa implementacja suwaka.

Implementacja zaawansowana

Przy bardziej złożonym suwaku możesz dodatkowo użyć funkcji tych parametrów.

  • colors: wystąpienie SliderColors, które umożliwia kontrolowanie kolorów suwaka.
  • valueRange: zakres wartości, które może przyjmować suwak.
  • steps: liczba otworów na suwaku, do których kciuk jest przyciągany.

W poniższym fragmencie znajduje się suwak, który składa się z 3 etapów i zakresu od 0.0 do 50.0. Kciuk jest przyciągany do każdego kroku, więc suwak jest dyskretny.

@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

Implementacja wygląda tak:

Wpisz tutaj swój tekst alternatywny
Rysunek 3. Suwak z krokami i określonym zakresem wartości.
.

Suwak zakresu

Możesz też użyć dedykowanej funkcji kompozycyjnej RangeSlider. Dzięki temu użytkownik może: Wybierz 2 wartości. Może to być przydatne, jeśli na przykład użytkownik chce określ cenę minimalną i maksymalną.

Poniższy przykład jest stosunkowo prostym przykładem stałego suwakiem zakresu.

@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

Komponent suwaka zakresu z zaznaczonymi 2 wartościami. Etykieta wskazuje górną i dolną granicę zaznaczenia.
Rysunek 4. Implementacja suwaka zakresu.

Dodatkowe materiały