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 tata letak ScalingLazyColumn versi Horologist untuk membuat konten yang terlihat bagus di berbagai ukuran layar Wear OS. Misalnya, pada contoh di bawah, padding yang diperlukan akan ditambahkan ke elemen pertama dan terakhir daftar yang ditetapkan dalam scrollState 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 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