Kaydırma çubuğu

Slider composable, kullanıcıların bir değer aralığından seçim yapmasına olanak tanır. 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:

  • İzleme: Parça, kaydırma çubuğunun alabileceği değer aralığını temsil eden yatay çubuktur.
  • Küçük resim: Kaydırma çubuğunda, kullanıcının parça tarafından tanımlanan aralık içinde belirli bir değeri seçmesine olanak tanıyan sürüklenebilir bir kontrol öğesidir.
  • Tik işaretleri: Onay işaretleri, kaydırma çubuğu yolu boyunca görünen isteğe bağlı görsel işaretçiler veya göstergelerdir.
Baş parmak, parça ve tik işaretleri bulunan bir kaydırma çubuğu.
Şekil 1. Kaydırma çubuğu uygulaması.

Temel uygulama

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

  • value: Kaydırma çubuğunun mevcut değeri.
  • onValueChange: Değer her değiştirildiğ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 yaklaşık dörtte üçü seçilmiş bir değere sahip kaydırma çubuğu bileşeni.
Şekil 2. Kaydırma çubuğunun temel kullanımı.

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: Kaydırma çubuğunda, başparmağın geçirildiği çentiklerin sayısı.

Aşağıdaki snippet'te 0.0 ile 50.0 arasında değişen, üç adımlı bir kaydırma çubuğu uygulanmıştır. Başparmak her adıma yerleştiği için bu kaydırma çubuğu özeldir.

@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 belirlenen değer aralığını gösteren kaydırma çubuğu.

Aralık kaydırma çubuğu

Özel RangeSlider composable'ı da kullanabilirsiniz. Bu, kullanıcının iki değer seçmesine olanak tanır. Bu, kullanıcının minimum ve maksimum fiyat seçmek istediği durumlarda yararlı olabilir.

Aşağıdaki örnek, sürekli aralık kaydırma çubuğunun nispeten basit bir örneğidir.

@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

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.
Şekil 4. Aralık kaydırma çubuğu uygulaması.

Ek kaynaklar