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 doğru hareket eden öğeler küçülür ve soluklaşır.

Önerilen ölçeklendirme ve kaydırma efektlerini uygulamak için:

  1. Öğe ekranda kaydırılırken Compose'un yükseklik değişikliğini hesaplamasına izin vermek için Modifier.transformedHeight kullanın.
  2. Öğe içeriklerini küçültme de dahil olmak üzere görsel efektleri uygulamak için transformation = SurfaceTransformation(transformationSpec) kısayolunu kullanın.
  3. transformation parametresini almayan bileşenler (ör. Text) için özel bir TransformationSpec kullanın.

Aşağıdaki animasyonda, bir liste öğesinin ekranın üst ve alt kısımlarına yaklaştığında nasıl ölçeklendiği ve şekil değiştirdiği gösterilmektedir:

Aşağıdaki kod snippet'inde, TransformingLazyColumn düzenini kullanarak çeşitli Wear OS ekran boyutlarında harika görünen içerikler oluşturmak için nasıl liste oluşturulacağı gösterilmektedir.

Snippet'te, listenin üst ve alt kısmında doğru dolguyu uygulamak için liste öğelerinde ayarlamanız gereken minimumVerticalContentPadding değiştiricisinin kullanımı da gösterilmektedir.

Kaydırma göstergesini göstermek için ScreenScaffold ile TransformingLazyColumn arasındaki columnState değerini paylaşın:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                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 aşağıdaki kod snippet'inde gösterildiği gibi flingBehavior parametresini TransformingLazyColumnDefaults.snapFlingBehavior(columnState) olarak ayarlayın: 
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt