Suwak

Komponent Slider umożliwia użytkownikom wybieranie wartości z zakresu. Suwak może służyć do:

  • dostosowywać ustawienia, które używają zakresu wartości, takie jak głośność i jasność;
  • filtrować dane na wykresie, np. podczas ustawiania przedziału cenowego;
  • dane wejściowe użytkownika, np. ustawienie oceny w opinii;

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

  • Ścieżka: ścieżka to poziomy pasek, który reprezentuje zakres wartości, jakie może przyjmować suwak.
  • Suwak: suwak to element sterujący, który można przeciągać, umożliwiający użytkownikowi wybranie określonej wartości w zakresie zdefiniowanym przez ścieżkę.
  • Znaczniki: znaczniki to opcjonalne znaczniki wizualne lub wskaźniki, które pojawiają się na ścieżce suwaka.
Suwak z uchwytem, ścieżką i znacznikami.
Rysunek 1. Implementacja suwaka.

Implementacja podstawowa

Pełną definicję interfejsu API znajdziesz w dokumentacji Slider. Oto niektóre z najważniejszych parametrów funkcji kompozycyjnej Slider:

  • value: bieżąca wartość suwaka.
  • onValueChange: funkcja lambda wywoływana za każdym razem, gdy wartość ulega zmianie.
  • enabled: wartość logiczna wskazująca, czy użytkownik może wejść w interakcję z suwakiem.

Poniższy przykład przedstawia prosty suwak. Umożliwia użytkownikowi wybranie wartości od 0.0 do 1.0. Ponieważ użytkownik może wybrać dowolną wartość z tego zakresu, 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())
    }
}

Implementacja wygląda tak:

Komponent suwaka z wartością wybraną mniej więcej w 3/4 długości ścieżki.
Rysunek 2. Podstawowa implementacja suwaka.

Implementacja zaawansowana

Podczas wdrażania bardziej złożonego suwaka możesz dodatkowo użyć tych parametrów.

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

Poniższy fragment kodu implementuje suwak z 3 krokami i zakresem od 0.0 do 50.0. Ponieważ suwak przeskakuje do każdego kroku, jest on 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())
    }
}

Implementacja wygląda tak:

Suwak z podziałką z zakresem od 0 do 50, pokazujący 5 znaczników w równych odstępach. Suwak znajduje się w pobliżu drugiego znacznika, co wskazuje wybraną wartość 16.
Rysunek 3. Suwak z krokami i ustawionym zakresem wartości.

Suwak zakresu

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

Poniższy przykład pokazuje stosunkowo prosty suwak zakresu ciągłego.

@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())
    }
}

Komponent suwaka zakresu z wybranymi 2 wartościami. Etykieta wyświetla górną i dolną granicę wyboru.
Rysunek 4. Implementacja suwaka zakresu.

Dodatkowe materiały