Daftar-detail adalah pola UI yang terdiri dari tata letak panel ganda dengan satu panel menampilkan daftar item dan panel lainnya menampilkan detail item yang dipilih dari daftar.
Pola ini sangat berguna untuk aplikasi yang menyediakan informasi mendalam tentang elemen koleksi besar, misalnya program email yang memiliki daftar email dan konten mendetail dari setiap pesan email. Daftar-detail juga dapat digunakan untuk jalur yang kurang penting seperti membagi preferensi aplikasi ke dalam daftar kategori dengan preferensi untuk setiap kategori di panel detail.
Terapkan pola UI dengan ListDetailPaneScaffold
ListDetailPaneScaffold
adalah composable yang menyederhanakan implementasi
pola daftar-detail di aplikasi Anda. Scaffold daftar-detail dapat terdiri dari maksimal
tiga panel: panel daftar, panel detail, dan panel tambahan opsional. Scaffold menangani penghitungan ruang layar. Jika ukuran layar yang memadai
tersedia, panel detail akan ditampilkan di samping panel daftar. Pada ukuran layar
kecil, scaffold akan otomatis beralih untuk menampilkan layar penuh panel daftar atau
detail.
![Panel detail yang ditampilkan di samping halaman daftar.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/list-detail-2.png?authuser=5&hl=id)
![Setelah item dipilih, panel detail akan mengambil alih seluruh layar.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/list-detail-1.png?authuser=5&hl=id)
Mendeklarasikan dependensi
ListDetailPaneScaffold
adalah bagian dari library tata letak adaptif
Material 3.
Aplikasi Anda harus menyertakan dependensi untuk tiga library Material 3 terkait:
- adaptif — Elemen penyusun tingkat rendah seperti
HingeInfo
danPosture
- tata letak adaptif — Tata letak adaptif seperti
ListDetailPaneScaffold
danSupportingPaneScaffold
- adaptive-navigation — Composable untuk menavigasi di dalam dan antar-panel
Tambahkan dependensi ke file build.gradle
aplikasi atau modul Anda:
Kotlin
implementation("androidx.compose.material3.adaptive:adaptive:1.0.0-alpha12") implementation("androidx.compose.material3.adaptive:adaptive-layout:1.0.0-alpha12") implementation("androidx.compose.material3.adaptive:adaptive-navigation:1.0.0-alpha12")
Groovy
implementation 'androidx.compose.material3.adaptive:adaptive:1.0.0-alpha12' implementation 'androidx.compose.material3.adaptive:adaptive-layout:1.0.0-alpha12' implementation 'androidx.compose.material3.adaptive:adaptive-navigation:1.0.0-alpha12'
Penggunaan dasar
Terapkan ListDetailPaneScaffold
sebagai berikut:
Gunakan class yang mewakili konten yang akan dipilih. Class ini harus berupa
Parcelable
untuk mendukung penyimpanan dan pemulihan item daftar yang dipilih. Gunakan plugin kotlin-parcelize untuk membuat kode untuk Anda.@Parcelize class MyItem(val id: Int) : Parcelable
Buat
ThreePaneScaffoldNavigator
denganrememberListDetailPaneScaffoldNavigator
dan tambahkanBackHandler
. Navigator ini digunakan untuk berpindah di antara panel daftar, detail, dan ekstra. Dengan mendeklarasikan jenis generik, navigator juga melacak status scaffold (yaitu, saatMyItem
ditampilkan). Karena jenis ini dapat dibagi-bagi, status dapat disimpan dan dipulihkan oleh navigator untuk menangani perubahan konfigurasi secara otomatis.BackHandler
menyediakan dukungan untuk menavigasi kembali menggunakan gestur atau tombol kembali sistem. Perilaku yang diharapkan dari tombol kembali untukListDetailPaneScaffold
bergantung pada ukuran jendela dan nilai scaffold saat ini. JikaListDetailPaneScaffold
dapat mendukung kembali dengan status saat ini,canNavigateBack()
adalahtrue
, sehingga mengaktifkanBackHandler
.val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
Teruskan
scaffoldState
darinavigator
ke composableListDetailPaneScaffold
.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, // ... )
Sediakan implementasi panel daftar Anda ke
ListDetailPaneScaffold
. GunakanAnimatedPane
untuk menerapkan animasi panel default selama navigasi. Lalu, gunakanThreePaneScaffoldNavigator
untuk membuka panel detail,ListDetailPaneScaffoldRole.Detail
, dan menampilkan item yang diteruskan.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { MyList( onItemClick = { item -> // Navigate to the detail pane with the passed item navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) } ) } }, // ... )
Sertakan implementasi panel detail Anda di
ListDetailPaneScaffold
. Setelah navigasi selesai,currentDestination
berisi panel yang telah dibuka oleh aplikasi Anda, termasuk konten yang ditampilkan di panel. Properticontent
adalah jenis yang sama dengan yang ditentukan dalam panggilan remember asli (MyItem
dalam contoh ini), sehingga Anda juga dapat mengakses properti untuk data apa pun yang perlu Anda tampilkan.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = // ... detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { MyDetails(it) } } }, )
Setelah menerapkan langkah-langkah di atas, kode Anda akan terlihat seperti ini:
val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { MyList( onItemClick = { item -> // Navigate to the detail pane with the passed item navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) }, ) } }, detailPane = { AnimatedPane { // Show the detail pane content if selected item is available navigator.currentDestination?.content?.let { MyDetails(it) } } }, )