Daftar dengan Compose untuk Wear OS

Daftar memungkinkan pengguna memilih item dari serangkaian pilihan di perangkat Wear OS.

Banyak perangkat Wear OS menggunakan layar bundar, yang menyulitkan untuk melihat item daftar yang muncul di dekat bagian atas dan bawah layar. Karena alasan ini, Compose untuk Wear OS menyertakan versi class LazyColumn yang disebut TransformingLazyColumn, yang mendukung animasi penskalaan dan perubahan bentuk. Saat dipindahkan ke tepi, item akan menjadi lebih kecil dan memudar.

Untuk menambahkan efek penskalaan dan scroll, gunakan Modifier.transformedHeight agar Compose dapat menghitung perubahan tinggi saat item men-scroll melalui layar dan transformation = SurfaceTransformation(transformationSpec) untuk menerapkan efek visual, termasuk menskalakan item secara visual agar cocok dengan yang sebelumnya.

Animasi berikut menunjukkan perubahan ukuran dan transparansi elemen saat bergerak di sepanjang layar:

Cuplikan kode berikut menunjukkan cara membuat daftar menggunakan tata letak TransformingLazyColumn untuk membuat konten yang terlihat bagus di berbagai ukuran layar Wear OS, misalnya dalam kode contoh berikut, kode ini akan menambahkan padding yang diperlukan ke elemen pertama dan terakhir daftar yang ditetapkan di contentPadding dari TransformingLazyColumn. Agar indikator scroll ditampilkan, bagikan columnState antara ScreenScaffold dan TransformingLazyColumn:

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

Menambahkan efek snap-dan-fling

Jika Anda perlu menambahkan perilaku snap-and-fling, sebaiknya gunakan ScalingLazyColumn. Efek ini membantu pengguna menavigasi item dalam daftar dengan lebih akurat sekaligus membantu mereka menelusuri daftar panjang dengan lebih cepat.

Untuk menambahkan efek ini ke versi ScalingLazyColumn Horologist, tetapkan parameter rotaryMode dari columnState ke RotaryWithSnap, seperti yang ditunjukkan dalam cuplikan kode berikut:

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