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ığı belirlerken 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.
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:
Gelişmiş uygulama
Daha karmaşık bir kaydırma çubuğu uygularken aşağıdaki parametreleri kullanabilirsiniz.
colors
: Kaydırma çubuğunun renklerini kontrol etmenize olanak tanıyan birSliderColors
örneği.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:
Aralık kaydırma çubuğu
Özel RangeSlider
composable'ı da kullanabilirsiniz. Bu sayede kullanıcı iki değer seçebilir. Bu, kullanıcının minimum ve maksimum fiyat seçmek istediği durumlarda yararlı olabilir.
Aşağıdaki örnek sürekli bir sürekli erişim örneğidir. aralık kaydırma çubuğu.
@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()) } }