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.

Birçok Wear OS cihazda yuvarlak ekran kullanılır. Bu da ekranın görülmesini zorlaştırır. ekranın üst ve alt kısmına yakın bir yerde görünen öğeleri listeler. İşte bu nedenle Wear OS için yazma, LazyColumn sınıfının şu adlı bir sürümünü içeriyor: ScalingLazyColumn: Ölçeklendirme ve solma efektlerini destekler. Öğeler ekrana doğru hareket ettikçe daha büyük ve opak hale gelirler.

Aşağıdaki animasyonda, bir öğenin boyutunun ve şeffaflığının ekranda hareket eder:

Aşağıdaki kod snippet'i, Horologist'in yöntemini kullanarak nasıl liste ScalingLazyColumn düzeninin yeni bir sürümü kullanıma sunduk. çeşitli Wear OS ekran boyutlarında mükemmel görünür. Örneğin, ilk ve son öğelere gerekli dolguyu ekler. ScalingLazyColumn öğesinin scrollState içinde bulunan

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 uyguladığı parmak hareketlerine atlama ve kaydırma davranışı ekleyebilirsiniz ScalingLazyColumn nesneye. Bu efekt, kullanıcıların daha hassas bir şekilde gezinmesine yardımcı olur öğeler arasında gezinme olanağı sunar ve aynı zamanda bir yayında daha hızlı uzun bir listedir.

Bu efekti Horoloji uzmanının ScalingLazyColumn versiyonuna eklemek için columnState öğesinin rotaryMode parametresini şuna ayarla: RotaryWithSnap, aşağıdaki kod snippet'inde gösterildiği gibi:

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