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ığı 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:

  • 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.
ziyaret edin.
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. 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 kullanımı.

Gelişmiş uygulama

Daha karmaşık bir kaydırma çubuğu uygularken aşağıdaki parametreleri kullanabilirsiniz.

  • colors: Bir SliderColors örneği olarak renklerini görebilirsiniz.
  • 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.
ziyaret edin.

Aralık kaydırma çubuğu

Özel RangeSlider composable'ı da kullanabilirsiniz. Bu, kullanıcıya iki değer seçin. Bu, kullanıcının bir web sitesini ziyaret etmek Minimum ve maksimum fiyat seçin.

Aşağıdaki örnek sürekli bir sürekli erişim örneğidir. aralık kaydırıcısı.

@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