Kaydırma

Not: Bir öğe listesi göstermek istiyorsanız bu API'ler yerine LazyColumn ve LazyRow kullanmayı düşünebilirsiniz. LazyColumn ve LazyRow özelliklerinde kaydırma bulunur ve yalnızca gerektiğinde öğeleri oluşturdukları için kaydırma değiştiricisinden çok daha verimlidirler. Daha fazla bilgi için Listeler ve ızgaralar dokümanlarına bakın.

Kaydırma değiştiricileri

verticalScroll ve horizontalScroll değiştiricileri, içeriğinin sınırları maksimum boyut kısıtlamalarından daha büyük olduğunda kullanıcının bir öğeyi kaydırmasına izin vermenin en basit yolunu sağlar. verticalScroll ve horizontalScroll değiştiricileriyle içerikleri çevirmeniz veya kaydırmanız gerekmez.

@Composable
private fun ScrollBoxes() {
    Column(
        modifier = Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .verticalScroll(rememberScrollState())
    ) {
        repeat(10) {
            Text("Item $it", modifier = Modifier.padding(2.dp))
        }
    }
}
GesturesSnippets.kt

Şekil 1. Kaydırma hareketlerine yanıt veren basit bir dikey liste.

ScrollState kaydırma konumunu değiştirmenize veya mevcut durumunu almanıza olanak tanır. Varsayılan parametrelerle oluşturmak için rememberScrollState() kullanın.

@Composable
private fun ScrollBoxesSmooth() {
    // Smoothly scroll 100px on first composition
    val state = rememberScrollState()
    LaunchedEffect(Unit) { state.animateScrollTo(100) }

    Column(
        modifier = Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .padding(horizontal = 8.dp)
            .verticalScroll(state)
    ) {
        repeat(10) {
            Text("Item $it", modifier = Modifier.padding(2.dp))
        }
    }
}
GesturesSnippets.kt

Kaydırılabilir alan değiştiricisi

scrollableArea değiştiricisi, özel kaydırılabilir kapsayıcılar oluşturmak için temel bir yapı taşıdır. scrollable değiştiricisi üzerinde daha üst düzey bir soyutlama sağlar. Hareket deltası yorumlama, içerik kırpma ve aşırı kaydırma efektleri gibi yaygın gereksinimleri karşılar.

scrollableArea özel uygulamalar için kullanılırken standart kaydırma listeleri için genellikle verticalScroll, horizontalScroll gibi hazır çözümleri veya LazyColumn gibi birleştirilebilir öğeleri tercih etmelisiniz. Bu üst düzey bileşenler, yaygın kullanım alanlarında daha basittir ve scrollableArea kullanılarak oluşturulur.

scrollableArea ve scrollable değiştiricileri arasındaki fark

scrollableArea ve scrollable arasındaki temel fark, kullanıcıların kaydırma hareketlerini yorumlama şekilleridir:

• scrollable (ham delta): Delta, kullanıcının girişinin (ör. işaretçi sürükleme) ekrandaki fiziksel hareketini doğrudan yansıtır.
• scrollableArea (içeriğe yönelik delta): delta, kaydırma konumundaki seçili değişikliği temsil etmek için anlamsal olarak tersine çevrilir. Böylece içerik, kullanıcının hareketiyle birlikte hareket ediyormuş gibi görünür. Bu hareket genellikle işaretçi hareketinin tersidir.

Şöyle düşünebilirsiniz: scrollable, işaretçinin nasıl hareket ettiğini gösterirken scrollableArea, bu işaretçi hareketini içeriğin normal bir kaydırılabilir görünümde nasıl hareket etmesi gerektiğine dönüştürür. Bu ters çevirme, standart bir kaydırılabilir kapsayıcı uygulanırken scrollableArea öğesinin daha doğal görünmesinin nedenidir.

Aşağıdaki tabloda, yaygın senaryolardaki delta işaretleri özetlenmiştir:

Kullanıcı hareketi	scrollable tarafından dispatchRawDelta için bildirilen delta	scrollableArea tarafından dispatchRawDelta için bildirilen fark*
İşaretçi YUKARI hareket eder.	Olumsuz	Pozitif (Positive)
İşaretçi AŞAĞI hareket eder.	Pozitif (Positive)	Olumsuz
İşaretçi SOLA hareket ediyor	Olumsuz	Pozitif (RTL için Negatif)
İşaretçi SAĞA hareket eder.	Pozitif (Positive)	Negatif (sağdan sola diller için Pozitif)

(*) scrollableArea delta işaretiyle ilgili not: scrollableArea delta işaretinin işareti yalnızca basit bir ters çevirme değildir. Aşağıdaki faktörleri akıllıca değerlendirir:

1. Yön: Dikey veya yatay.
2. LayoutDirection: Soldan sağa veya sağdan sola (özellikle yatay kaydırma için önemlidir).
3. reverseScrolling işareti: Kaydırma yönünün tersine çevrilip çevrilmediği.

Kaydırma farkını ters çevirmenin yanı sıra scrollableArea, içeriği düzenin sınırlarına da kırpar ve aşırı kaydırma efektlerinin oluşturulmasını sağlar. Varsayılan olarak, LocalOverscrollFactory tarafından sağlanan efekt kullanılır. OverscrollEffect parametresini kabul eden scrollableArea aşırı yüklemesini kullanarak bunu özelleştirebilir veya devre dışı bırakabilirsiniz.

scrollableArea değiştiricisi ne zaman kullanılır?

scrollableArea veya horizontalScroll değiştiricileri ya da Lazy düzenleri tarafından yeterince sunulmayan özel bir kaydırma bileşeni oluşturmanız gerektiğinde scrollableArea değiştiricisini kullanmanız gerekir.verticalScroll Bu durum genellikle şu tür vakaları içerir:

• Özel düzen mantığı: Öğelerin düzeni, kaydırma konumuna göre dinamik olarak değiştiğinde.
• Benzersiz görsel efektler: Çocuklar kaydırma yaparken onlara dönüştürme, ölçeklendirme veya başka efektler uygulama.
• Doğrudan kontrol: verticalScroll veya Lazy düzenlerin sunduğunun ötesinde, kaydırma mekanizması üzerinde ayrıntılı kontrol gerektiren durumlar.

scrollableArea kullanarak özel tekerlek benzeri listeler oluşturma

Aşağıdaki örnekte, öğeler merkezden uzaklaştıkça küçülerek "tekerlek benzeri" bir görsel efekt oluşturan özel bir dikey liste oluşturmak için scrollableArea parametresinin kullanımı gösterilmektedir. Bu tür kaydırmaya bağlı dönüşüm, scrollableArea için mükemmel bir kullanım alanıdır.

Şekil 2. scrollableArea kullanılarak özelleştirilmiş bir dikey liste.

@Composable
private fun ScrollableAreaSample() {
    // ...
    Layout(
        modifier =
            Modifier
                .size(150.dp)
                .scrollableArea(scrollState, Orientation.Vertical)
                .background(Color.LightGray),
        // ...
    ) { measurables, constraints ->
        // ...
        // Update the maximum scroll value to not scroll beyond limits and stop when scroll
        // reaches the end.
        scrollState.maxValue = (totalHeight - viewportHeight).coerceAtLeast(0)

        // Position the children within the layout.
        layout(constraints.maxWidth, viewportHeight) {
            // The current vertical scroll position, in pixels.
            val scrollY = scrollState.value
            val viewportCenterY = scrollY + viewportHeight / 2

            var placeableLayoutPositionY = 0
            placeables.forEach { placeable ->
                // This sample applies a scaling effect to items based on their distance
                // from the center, creating a wheel-like effect.
                // ...
                // Place the item horizontally centered with a layer transformation for
                // scaling to achieve wheel-like effect.
                placeable.placeRelativeWithLayer(
                    x = constraints.maxWidth / 2 - placeable.width / 2,
                    // Offset y by the scroll position to make placeable visible in the viewport.
                    y = placeableLayoutPositionY - scrollY,
                ) {
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                }
                // Move to the next item's vertical position.
                placeableLayoutPositionY += placeable.height
            }
        }
    }
}
// ...
GesturesSnippets.kt

Kaydırılabilir değiştirici

Not: scrollable, kaydırılabilir kapsayıcılar için yaygın olarak kullanılan diğer davranışlar olmadan düşük düzeyde kaydırma giriş hareketlerini işleyen düşük düzeyli bir değiştiricidir. Kaydırılabilir kapsayıcılar oluşturma hakkında bilgi edinmek için androidx.compose.foundation.scrollableArea başlıklı makaleyi inceleyin. scrollableArea İçeriğini sınırlarına göre kırpar, aşırı kaydırmayı oluşturur ve içeriğin kullanıcının hareketleriyle birlikte hareket ettiğini doğrulamak için kaydırma hareketlerinin yönünü ayarlar.

scrollable değiştiricisi, scrollable kaydırma hareketlerini algılayıp deltaları yakalaması ancak içeriklerini otomatik olarak kaydırmaması bakımından kaydırma değiştiricilerinden farklıdır. Bunun yerine, bu değiştiricinin doğru çalışması için gerekli olan ScrollableState aracılığıyla kullanıcıya yetki verilir.

ScrollableState oluştururken her kaydırma adımında (jest girişi, sorunsuz kaydırma veya hızlı kaydırma ile) piksel cinsinden delta ile çağrılacak bir consumeScrollDelta işlevi sağlamanız gerekir. Bu işlev, scrollable değiştiricisine sahip iç içe yerleştirilmiş öğelerin bulunduğu durumlarda etkinliğin düzgün şekilde yayılmasını sağlamak için kullanılan kaydırma mesafesini döndürmelidir.

Not: scrollable değiştiricisi, uygulandığı öğenin düzenini etkilemez. Bu, öğe düzeninde veya alt öğelerinde yapılan değişikliklerin ScrollableState tarafından sağlanan delta aracılığıyla yapılması gerektiği anlamına gelir. Ayrıca scrollable'nın çocukların düzenleri hakkında fikir sahibi olmadığını, bu nedenle kaydırma farkını yaymak için çocukları ölçmesi gerekmediğini de belirtmek önemlidir.

Aşağıdaki snippet, hareketleri algılar ve bir ofset için sayısal değer gösterir ancak herhangi bir öğeyi ofsetlemez:

@Composable
private fun ScrollableSample() {
    // actual composable state
    var offset by remember { mutableFloatStateOf(0f) }
    Box(
        Modifier
            .size(150.dp)
            .scrollable(
                orientation = Orientation.Vertical,
                // Scrollable state: describes how to consume
                // scrolling delta and update offset
                state = rememberScrollableState { delta ->
                    offset += delta
                    delta
                }
            )
            .background(Color.LightGray),
        contentAlignment = Alignment.Center
    ) {
        Text(offset.toString())
    }
}
GesturesSnippets.kt

Şekil 3. Parmakla basma işlemini algılayan ve parmağın konumuna ilişkin sayısal değeri gösteren bir kullanıcı arayüzü öğesi.