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.
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Compose untuk Codelab Wear OS
- Daftar dan Petak
- Menggunakan View di Compose