Kaydırma çubuğu

Slider composable, kullanıcıların bir dizi değer arasından seçim yapmasına olanak tanır. Kullanıcının aşağıdakileri yapmasına izin vermek için kaydırma çubuğunu kullanabilirsiniz:

  • Ses düzeyi ve parlaklık gibi bir dizi değer kullanan ayarları düzenleyin.
  • Grafikteki verileri, fiyat aralığı belirlerken yaptığınız gibi filtreleyin.
  • Kullanıcı girişi (ör. bir yorumda puan belirleme).

Kaydırma çubuğu bir parça, baş parmak, değer etiketi ve onay işaretleri içerir:

  • Parkur: Parça, kaydırma çubuğunun alabileceği değer aralığını temsil eden yatay çubuktur.
  • Baş parmak: Kullanıcının, parça tarafından tanımlanan aralık içindeki belirli bir değeri seçmesine olanak tanıyan, kaydırma çubuğundaki sürüklenebilir kontrol öğesidir.
  • Onay işaretleri: Onay işaretleri, kaydırma çubuğunun izi boyunca görünen isteğe bağlı görsel işaretçiler veya göstergelerdir.
Baş parmak, parça ve onay işaretleri bulunan bir kaydırma çubuğu.
Şekil 1. Kaydırma çubuğunun uygulanması.

Temel uygulama

Tam API tanımı için Slider referansına bakın. Slider composable'ı için önemli parametrelerden bazıları şunlardır:

  • value: Kaydırma çubuğunun mevcut değeri.
  • onValueChange: Değer her değiştiğinde çağrılan bir lambda.
  • enabled: Kullanıcının kaydırma çubuğuyla etkileşimde bulunup bulunamayacağını gösteren bir boole değeridir.

Aşağıdaki örnekte basit bir kaydırma çubuğu gösterilmektedir. Bu, kullanıcının 0.0 ile 1.0 arasında bir değer seçmesine olanak tanır. Kullanıcı bu aralıktaki herhangi bir değeri seçebileceği için 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())
    }
}
Slider.kt

Bu uygulama aşağıdaki gibi görünür:

Kanal boyunca seçilen değerin yaklaşık dörtte üçü olan bir kaydırma çubuğu bileşeni.
Şekil 2. Kaydırma çubuğunun temel uygulaması.

Gelişmiş uygulama

Daha karmaşık bir kaydırma çubuğu uygularken aşağıdaki parametrelerden de yararlanabilirsiniz.

  • colors: Kaydırma çubuğunun renklerini kontrol etmenizi sağlayan bir SliderColors örneği.
  • valueRange: Kaydırma çubuğunun alabileceği değer aralığı.
  • steps: Başparmağın kaydırma çubuğunda yer alan çentik sayısı.

Aşağıdaki snippet'te, 0.0-50.0 aralığında üç adımlı bir kaydırma çubuğu uygulanmaktadır. Baş parmak her bir adıma sabitlendiği için bu kaydırma çubuğu ayrıdır.

@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

Uygulama aşağıdaki gibi görünür:

Alternatif metninizi buraya yazın
Şekil 3. Adımları ve belirli bir değer aralığını gösteren kaydırma çubuğu.

Aralık kaydırma çubuğu

Ayrıca RangeSlider için özel composable'ı da kullanabilirsiniz. Bu, kullanıcının iki değer seçmesine olanak tanır. Bu, kullanıcının bir minimum ve maksimum fiyat seçmek istemesi gibi durumlarda yararlı olabilir.

Aşağıdaki örnek, sürekli aralık kaydırma çubuğuna ilişkin nispeten basit bir örnektir.

@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

İki değerin seçili olduğu bir aralık kaydırma çubuğu bileşeni. Etiket, seçimin üst ve alt sınırlarını görüntüler.
Şekil 4. Aralık kaydırma çubuğu uygulaması.

Ek kaynaklar