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 pengubahan bentuk. Saat dipindahkan ke tepi, item akan menjadi lebih kecil dan memudar.

Untuk menambahkan efek penskalaan dan scrolling, gunakan Modifier.transformedHeight agar Compose dapat menghitung perubahan tinggi saat item men-scroll melalui layar dan transformation = SurfaceTransformation(transformationSpec) untuk menerapkan efek visual, termasuk memperkecil item secara visual agar sesuai dengan sebelumnya. Gunakan TransformationSpec kustom untuk komponen yang tidak menggunakan transformation sebagai parameter, misalnya Text.

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 tampak bagus di berbagai ukuran layar Wear OS, misalnya dalam contoh kode berikut, padding yang diperlukan akan ditambahkan ke elemen pertama dan terakhir dalam 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 menyentak dan menggeser, 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