Wear OS için Compose içeren listeler

Listeler, kullanıcıların Wear OS cihazlarda bir dizi seçenek arasından öğe seçmesine olanak tanır.

Birçok Wear OS cihazda yuvarlak ekran kullanıldığından ekranın üst ve alt kısımlarında görünen liste öğelerini görmek daha zordur. Bu nedenle, Wear OS için Compose'da LazyColumn sınıfının TransformingLazyColumn adlı bir sürümü bulunur. Bu sürüm, ölçeklendirme ve şekil değiştirme animasyonlarını destekler. Kenarlara taşınan öğeler küçülür ve soluklaşır.

Ölçeklendirme ve kaydırma efekti eklemek için Modifier.transformedHeight öğesini kullanarak Compose'un, öğe ekranda kaydırılırken yükseklik değişikliğini hesaplamasına izin verin ve transformation = SurfaceTransformation(transformationSpec) öğesini kullanarak, öğeyi görsel olarak küçültüp öncekiyle eşleştirme de dahil olmak üzere görsel efektleri uygulayın. transformation parametresini almayan bileşenler için özel bir TransformationSpec kullanın. Örneğin, Text.

Aşağıdaki animasyonda, bir öğenin ekranda hareket ederken boyutunun ve saydamlığının nasıl değiştiği gösterilmektedir:

Aşağıdaki kod snippet'i, TransformingLazyColumn düzenini kullanarak nasıl liste oluşturulacağını gösterir. Bu düzen, çeşitli Wear OS ekran boyutlarında harika görünen içerikler oluşturmak için kullanılır. Örneğin, aşağıdaki örnek kodda, TransformingLazyColumn öğesinin contentPadding bölümünde ayarlanan listenin ilk ve son öğelerine gerekli dolgu eklenir. Kaydırma göstergesinin gösterilmesi için ScreenScaffold ile TransformingLazyColumn arasındaki columnState değerini paylaşın:

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

Snap-and-fling efekti ekleme

Bir yapıştır ve fırlat davranışı eklemeniz gerekiyorsa ScalingLazyColumn kullanmanızı öneririz. Bu efekt, kullanıcıların listedeki öğeler arasında daha hassas bir şekilde gezinmelerine ve uzun bir listede daha hızlı ilerlemelerine yardımcı olur.

Bu efekti Horologist'in ScalingLazyColumn sürümüne eklemek için aşağıdaki kod snippet'inde gösterildiği gibi columnState öğesinin rotaryMode parametresini RotaryWithSnap olarak ayarlayın:

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt