Kaydırma çubuğu

Slider bileşeni, 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 değer aralığı kullanan ayarları düzenleyin.
  • Fiyat aralığı ayarlarken olduğu gibi, grafikteki verileri filtreleyin.
  • Kullanıcı girişi (ör. yorumda puan belirleme).

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

  • Track: Parkur, videonun başlangıç noktasını temsil eden yatay çubuktur. hangi değerlere sahip olduğunu gösterir.
  • İş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.
  • 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, 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 değiştiğinde çağrılan bir lambda.
  • 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. Kullanıcı bu aralıktaki herhangi bir değeri seçebileceğinden 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 üçte ikilik bir değer seçilmiş bir 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ğunu 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ğ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 ayarlanmış bir değer aralığı olan bir 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 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ı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ğu uygulaması.

Ek kaynaklar