Slider
composable, kullanıcıların çok sayıda farklı türde
değerler. Kaydırma çubuğunu kullanarak kullanıcının aşağıdakileri yapmasına izin verebilirsiniz:
- Ses düzeyi ve parlaklık gibi bir değer aralığı kullanan ayarları düzenleyin.
- Fiyat aralığı ayarlarken olduğu gibi, grafikteki verileri filtreleyin.
- Kullanıcı girişleri (ör. yorumda puan belirlemek).
Kaydırma çubuğu bir parça, baş parmak, değer etiketi ve onay işaretleri içerir:
- Track: Parkur, videonun başlangıç noktasını temsil eden yatay çubuktur. hangi değerlere sahip olduğunu gösterir.
- Küçük resim: Başparmak, kaydırma çubuğunda bulunan sürüklenebilir bir kontrol öğesidir. kullanıcının plan yapar ve değişiklikleri uygular.
- Tik işaretleri: Onay işaretleri, kullanıcılara fikir verebilecek isteğe bağlı görsel işaretçiler veya göstergelerdir. kaydırma çubuğu üzerinde görünür.
![Baş parmak, parça ve tik işaretleri bulunan bir kaydırma çubuğu.](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider.png?authuser=19&hl=tr)
Temel uygulama
Tam API tanımı için Slider
referansına bakın. Bazı önemli noktalar
Slider
composable için parametreler aşağıdaki gibidir:
value
: Kaydırma çubuğunun mevcut değeri.onValueChange
: Değer her olduğunda çağrılan bir lambda değiştirildi.enabled
: Kullanıcının etkileşimde bulunup bulunamayacağını gösteren bir boole değeri kaydırma çubuğunu kullanın.
Aşağıdaki örnekte basit bir kaydırma çubuğu gösterilmektedir. Bu sayede kullanıcı
0.0
ile 1.0
arasında bir değer seçin. Çünkü kullanıcı, kontrol panelinde
kaydırma çubuğu sürekli olur.
@Preview @Composable fun SliderMinimalExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it } ) Text(text = sliderPosition.toString()) } }
Bu uygulama aşağıdaki gibi görünür:
![Kanal boyunca yaklaşık dörtte üçü seçilmiş bir değere sahip kaydırma çubuğu bileşeni.](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-basic.png?authuser=19&hl=tr)
Gelişmiş uygulama
Daha karmaşık bir kaydırma çubuğu uygularken aşağıdaki parametreleri kullanabilirsiniz.
colors
: BirSliderColors
örneği olarak renklerini görebilirsiniz.valueRange
: Kaydırma çubuğunun alabileceği değer aralığı.steps
: Kaydırma çubuğunda, başparmağın geçirildiği çentiklerin sayısı.
Aşağıdaki snippet'te üç adımlık ve bir aralık bulunan
0.0
-50.0
. Başparmak her adıma yerleştiği için bu kaydırma çubuğu
discrete değerleridir.
@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()) } }
Uygulama aşağıdaki gibi görünür:
![Alternatif metninizi buraya yazın](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-advanced.png?authuser=19&hl=tr)
Aralık kaydırma çubuğu
Özel RangeSlider
composable'ı da kullanabilirsiniz. Bu, kullanıcıya
iki değer seçin. Bu, kullanıcının bir web sitesini ziyaret etmek
Minimum ve maksimum fiyat seçin.
Aşağıdaki örnek sürekli bir sürekli erişim örneğidir. aralık kaydırıcısı.
@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()) } }
![Seçili iki değere sahip aralık kaydırma çubuğu bileşeni. Etiket, seçimin üst ve alt sınırlarını görüntüler.](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-range.png?authuser=19&hl=tr)