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 menerapkan efek penskalaan dan scrolling yang direkomendasikan:

  1. Gunakan Modifier.transformedHeight agar Compose dapat menghitung perubahan tinggi saat item di-scroll di layar.
  2. Gunakan transformation = SurfaceTransformation(transformationSpec) untuk menerapkan efek visual, termasuk memperkecil konten item.
  3. Gunakan TransformationSpec kustom untuk komponen yang tidak menggunakan transformation sebagai parameter seperti Text.

Animasi berikut menunjukkan cara elemen daftar diskalakan dan diubah bentuknya saat mendekati bagian atas dan bawah layar:

Cuplikan kode berikut menunjukkan cara membuat daftar menggunakan tata letak TransformingLazyColumn untuk membuat konten yang tampak bagus di berbagai ukuran layar Wear OS.

Cuplikan ini juga menunjukkan penggunaan pengubah minimumVerticalContentPadding, yang harus Anda tetapkan pada item daftar untuk menerapkan padding yang benar di bagian atas dan bawah daftar.

Untuk menampilkan indikator scroll, bagikan columnState antara ScreenScaffold dan TransformingLazyColumn:

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

Menambahkan efek snap-dan-fling

Jika Anda perlu menambahkan perilaku mengepaskan dan mengayunkan, tetapkan parameter flingBehavior ke TransformingLazyColumnDefaults.snapFlingBehavior(columnState), seperti yang ditunjukkan dalam cuplikan kode berikut: 
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt