Suwak

Funkcja kompozycyjna Slider umożliwia użytkownikom dokonywanie wyborów z zakresu wartości. Możesz użyć suwaka, aby pozwolić użytkownikowi na:

  • Możesz dostosować ustawienia, używając zakresu wartości takich jak głośność czy jasność.
  • Filtruj dane na wykresie, tak jak przy ustawianiu przedziału cenowego.
  • Dane wejściowe użytkownika, np. wystawienie oceny w opinii.

Suwak zawiera ścieżkę, miniaturę, etykietę wartości i znaczniki:

  • Śledzenie: to poziomy pasek reprezentujący zakres wartości, które może przyjmować suwak.
  • kciuk: to ruchomy element sterujący na suwaku, który umożliwia użytkownikowi wybranie określonej wartości z zakresu zdefiniowanego przez ścieżkę.
  • Znaczniki: to opcjonalne znaczniki wizualne lub wskaźniki wyświetlane na ścieżce suwaka.
Suwak z kciukiem, ścieżką i znacznikami.
Rysunek 1. Implementacja suwaka.

Implementacja podstawowa

Pełną definicję interfejsu API znajdziesz w dokumentacji Slider. Niektóre z kluczowych parametrów funkcji kompozycyjnej Slider to:

  • value: bieżąca wartość suwaka.
  • onValueChange: lambda, która jest wywoływana przy każdej zmianie wartości.
  • enabled: wartość logiczna wskazująca, czy użytkownik może wchodzić w interakcję z suwakiem.

Poniższy przykład przedstawia prosty suwak. Pozwoli to użytkownikowi wybrać wartość z zakresu od 0.0 do 1.0. Użytkownik może wybrać dowolną wartość w tym zakresie, więc 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 z suwakiem i wybraną wartością z około 3 czwartych wzdłuż ścieżki.
Rysunek 2. Podstawowa implementacja suwaka.

Implementacja zaawansowana

Gdy implementujesz bardziej złożony suwak, możesz dodatkowo użyć poniższych parametrów.

  • colors: wystąpienie SliderColors umożliwiające określenie kolorów suwaka.
  • valueRange: zakres wartości suwaka.
  • steps: liczba wycięć na suwaku, do których przyciąga kciuk.

Poniższy fragment kodu zawiera suwak z 3 krokami o zakresie od 0.0 do 50.0. Kciukt przyciąga się do każdego kroku, dlatego ten suwak jest oddzielny.

@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:

Tutaj wpisz tekst alternatywny
Rysunek 3. Suwak z krokami i ustawionym zakresem wartości.

Suwak zakresu

Możesz też użyć dedykowanego elementu kompozycyjnego RangeSlider. Dzięki temu użytkownik może wybrać 2 wartości. Może to być przydatne np. wtedy, gdy użytkownik chce wybrać cenę minimalną i maksymalną.

Poniższy przykład to stosunkowo prosty przykład suwaka ciągłego 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 wybranymi 2 wartościami. Etykieta pokazuje górną i dolną granicę zaznaczenia.
Rysunek 4. Implementacja suwaka zakresu.

Dodatkowe materiały