Penggeser

Composable Slider memungkinkan pengguna membuat pilihan dari berbagai masing-masing. Anda dapat menggunakan penggeser untuk mengizinkan pengguna melakukan hal berikut:

• Sesuaikan setelan yang menggunakan rentang nilai, seperti volume, dan kecerahan.
• Memfilter data dalam grafik, seperti saat menetapkan rentang harga.
• Input pengguna, seperti menetapkan rating dalam ulasan.

Penggeser berisi trek, thumb, label nilai, dan tanda centang:

• Trek: Trek adalah bilah horizontal yang mewakili rentang nilai yang dapat diambil penggeser.
• Thumb: Thumbnail adalah elemen kontrol yang dapat ditarik di penggeser yang memungkinkan pengguna memilih nilai tertentu dalam rentang yang ditentukan oleh jalur.
• Tanda centang: Tanda centang adalah penanda atau indikator visual opsional yang muncul di sepanjang trek penggeser.

Implementasi dasar

Lihat referensi Slider untuk definisi API lengkap. Beberapa kunci parameter untuk composable Slider adalah sebagai berikut:

• value: Nilai penggeser saat ini.
• onValueChange: Lambda yang dipanggil setiap kali nilainya ubah.
• enabled: Nilai boolean yang menunjukkan apakah pengguna dapat berinteraksi dengannya atau tidak {i>slider<i}.

Contoh berikut adalah penggeser langsung. Hal itu memungkinkan pengguna untuk pilih nilai dari 0.0 hingga 1.0. Karena pengguna dapat memilih nilai apa pun di rentang tersebut, penggeser akan bersifat berkelanjutan.

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

Implementasi ini muncul sebagai berikut:

Penerapan lanjutan

Saat menerapkan penggeser yang lebih kompleks, Anda juga dapat menggunakan parameter berikut.

• colors: Instance SliderColors yang memungkinkan Anda mengontrol warna dari penggeser.
• valueRange: Rentang nilai yang dapat diambil penggeser.
• steps: Jumlah lubang pada penggeser yang dipaskan ibu jari.

Cuplikan berikut menerapkan penggeser yang memiliki tiga langkah, dengan rentang dari 0.0 hingga 50.0. Karena ibu jari dipaskan ke setiap langkah, {i>slider<i} ini diskrit.

@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

Implementasinya muncul sebagai berikut:

Penggeser rentang

Anda juga dapat menggunakan composable RangeSlider khusus. Hal ini memungkinkan pengguna untuk memilih dua nilai. Hal ini dapat berguna dalam kasus seperti ketika pengguna ingin memilih harga minimum dan maksimum.

Contoh berikut adalah contoh yang relatif sederhana dari penggeser rentang.

@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

Referensi lainnya

• Dokumen UI Material