Kaydırma çubuğu

Slider bileşeni, kullanıcıların bir dizi değer arası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 ve parlaklık gibi bir dizi değer kullanan ayarları ayarlayın.
  • Fiyat aralığı belirlerken olduğu gibi grafikteki verileri filtreleyin.
  • Kullanıcı girişleri (ör. yorumda puan belirlemek).

Kaydırma çubuğunda bir kanal, kaydırma çubuğu ucu, değer etiketi ve onay işaretleri bulunur:

  • Kanal: Kanal, kaydırıcıya atanan değer aralığını gösteren yatay çubuktur.
  • İşaretçi: İşaretçi, kaydırma çubuğundaki sürüklenebilir bir kontrol öğesidir. Kullanıcının, kanal tarafından tanımlanan aralıktaki belirli bir değeri seçmesine olanak tanır.
  • Onay işaretleri: Onay işaretleri, kaydırma çubuğunun yolunda görünen isteğe bağlı görsel işaretçiler veya göstergelerdir.
Başparmak, şerit ve onay işaretleri içeren 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 bileşeninin temel parametrelerinden 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 çubuklarıyla etkileşim kurup kuramayacağını belirten bir boole değeridir.

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çebilir. 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:

Yaklaşık olarak parçanın üçte ikisinde seçili bir değere sahip 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 parametreleri de kullanabilirsiniz.

  • colors: Kaydırma çubuğunun renklerini kontrol etmenize olanak tanıyan bir SliderColors örneği.
  • valueRange: Kaydırma çubuğunun alabileceği değer aralığı.
  • steps: Kaydırma çubuğundaki, başparmağın takıldığı çentik 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 şu şekilde görünür:

Alternatif metninizi buraya yazın
Şekil 3. Adımları ve ayarlanmış bir değer aralığı olan bir kaydırma çubuğu.

Aralık kaydırma çubuğu

Özel RangeSlider bileşenini de 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

İ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ğunun bir uygulaması.

Ek kaynaklar