Kaydırma çubuğu

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.
Başparmak, kanal 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. 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())
    }
}
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 uygulaması.

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 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 üç 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())
    }
}
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 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())
    }
}
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ğunun bir uygulaması.

Ek kaynaklar