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 yang berisi teks untuk setiap item:

val contentModifier = Modifier
    .fillMaxWidth()
    .padding(bottom = 8.dp)

@Composable
fun WearApp() {
    WearAppTheme {
        // Hoist the list state to remember scroll position across compositions.
        val listState = rememberScalingLazyListState()

        ScalingLazyColumn(
            modifier = Modifier.fillMaxSize(),
            autoCentering = AutoCenteringParams(itemIndex = 0),
            state = listState
        ) {
            item { TextItem(contentModifier, stringResource(R.string.first)) }
            item { TextItem(contentModifier, stringResource(R.string.second)) }
        }
    }
}

@Composable
fun TextItem(modifier: Modifier = Modifier, contents: String) {
    Text(
        modifier = modifier,
        textAlign = TextAlign.Center,
        text = contents
    )
}

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 daftar atau pemilih di aplikasi Anda, sertakan parameter flingBehavior dalam definisi ScalingLazyColumn, seperti ditunjukkan dalam cuplikan kode berikut:

ScalingLazyColumn(
    modifier = modifier ...,
    flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(
        state = listState,
        snapOffset = 0
        // Exponential decay by default. You can also explicitly define a
        // DecayAnimationSpec.
    ) {
        // Contents of the list here.
}

Untuk menerapkan perilaku snap-dan-fling yang serupa ke ScalingLazyColumn saat pengguna berinteraksi dengan tombol putar, gunakan RotaryWithSnap yang tersedia di Horologist di GitHub.