Wear OS için Compose içeren listeler

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

Çoğu Wear OS cihazda yuvarlak ekranlar kullanılır. Bu durum, ekranın üst ve alt kısmına yakın bir yerde görünen liste öğelerinin görülmesini zorlaştırır. Bu nedenle, Wear OS için Oluştur, LazyColumn sınıfının ölçeklendirme ve solma efektlerini destekleyen ScalingLazyColumn adlı bir sürümünü içerir. Öğeler ekranın ortasına doğru hareket ettiğinde büyür ve opak hale gelir.

Aşağıdaki animasyonda, ekran boyunca hareket eden bir öğenin boyutunun ve şeffaflığının nasıl değiştiği gösterilmektedir:

Aşağıdaki kod snippet'i, çeşitli Wear OS ekran boyutlarında harika görünen içerikler oluşturmak için Horology'nin ScalingLazyColumn düzeninin sürümünü kullanarak nasıl liste oluşturacağınızı göstermektedir. Örneğin, aşağıdaki örnekte, ScalingLazyColumn öğesinin scrollState içinde ayarlanan listenin ilk ve son öğelerine gerekli dolgu eklenir:

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

Hızlıca kaydırma efekti ekleyin

Kullanıcının ScalingLazyColumn nesnelere uyguladığı parmak hareketlerine bir çırpma ve kaydırma davranışı ekleyebilirsiniz. Bu efekt, kullanıcıların bir listedeki öğeler arasında daha hassas bir şekilde gezinmelerine ve uzun bir listede daha hızlı hareket etmelerine yardımcı olur.

Bu efekti Horology'nin ScalingLazyColumn sürümüne eklemek için columnState özelliğinin 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