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 ScalingLazyColumn, yang mendukung efek penskalaan dan fading. Saat dipindahkan ke bagian tengah layar, item akan menjadi lebih besar dan tidak transparan.

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

Cuplikan kode berikut menunjukkan cara membuat daftar menggunakan metode versi tata letak ScalingLazyColumn untuk membuat konten yang terlihat bagus di berbagai ukuran layar Wear OS, misalnya di contoh di bawah ini, ini akan menambahkan padding yang diperlukan ke elemen pertama dan terakhir dari daftar yang ditetapkan dalam scrollState dari ScalingLazyColumn:

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

Menambahkan efek snap-dan-fling

Anda dapat menambahkan perilaku snap-dan-fling ke gestur jari yang diterapkan pengguna ke objek 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 milik Horologist, setel parameter rotaryMode dari columnState ke RotaryWithSnap, seperti yang ditampilkan dalam cuplikan kode berikut:

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