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 ekranlar kullanılır. Bu da ekranın üst ve alt kısmında görünen liste öğelerinin görülmesini zorlaştırır. Bu nedenle, Wear OS için Compose, ölçeklendirme ve dönüşüm animasyonlarını destekleyen TransformingLazyColumn adlı bir LazyColumn sınıfı sürümü içerir. Öğeler kenara taşındığında küçülür ve kaybolur.

Ölçeklendirme ve kaydırma efekti eklemek için Modifier.transformedHeight simgesini kullanarak öğe ekranda kaydırıldığında yükseklik değişikliğinin Oluştur tarafından hesaplanmasına izin verin. transformation = SurfaceTransformation(transformationSpec) simgesini kullanarak da görsel efektleri uygulayın. Örneğin, öğeyi öncekiyle eşleşecek şekilde görsel olarak küçültebilirsiniz.

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

Aşağıdaki kod snippet'inde, çeşitli Wear OS ekran boyutlarında harika görünen içerikler oluşturmak için TransformingLazyColumn düzenini kullanarak nasıl liste oluşturulacağı gösterilmektedir. Örneğin, aşağıdaki örnek kodda, TransformingLazyColumn öğesinin contentPadding alanında ayarlanan listenin ilk ve son öğelerine gerekli dolgu eklenir. Kaydırma göstergesinin gösterilmesi için columnState öğesini ScreenScaffold ile TransformingLazyColumn arasında 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

Bir fotoğrafı yakalayıp fırlatma efekti ekleme

Bir "dokun ve fırlat" davranışı eklemeniz gerekiyorsa ScalingLazyColumn öğesini kullanmanızı öneririz. Bu efekt, kullanıcıların bir listedeki öğeler arasında daha hassas bir şekilde gezinmesine ve uzun bir listede daha hızlı hareket etmesine yardımcı olur.

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

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