Daftar-detail adalah pola UI yang terdiri dari tata letak dua panel dengan satu panel menampilkan daftar item dan panel lain menampilkan detail item yang dipilih dari daftar.
Pola ini sangat berguna untuk aplikasi yang menyediakan informasi tentang elemen koleksi besar, misalnya, program email yang memiliki daftar email dan isi detail dari setiap pesan email. Daftar-detail juga dapat digunakan untuk jalur yang kurang penting seperti membagi aplikasi preferensi ke dalam daftar kategori dengan preferensi untuk setiap kategori 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 hingga
tiga panel: panel daftar, panel detail, dan panel tambahan opsional. Tujuan
scaffold menangani penghitungan ruang layar. Saat ukuran layar yang memadai
tersedia, panel detail ditampilkan di samping panel daftar. Di layar kecil
ukuran, scaffold secara otomatis beralih
untuk menampilkan daftar atau
layar penuh panel 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=8&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=8&hl=id)
Mendeklarasikan dependensi
ListDetailPaneScaffold
adalah bagian dari tata letak adaptif Material 3
library.
Tambahkan tiga dependensi terkait berikut ke file build.gradle
dari perintah
aplikasi atau modul:
Kotlin
implementation("androidx.compose.material3.adaptive:adaptive") implementation("androidx.compose.material3.adaptive:adaptive-layout") implementation("androidx.compose.material3.adaptive:adaptive-navigation")
Groovy
implementation 'androidx.compose.material3.adaptive:adaptive' implementation 'androidx.compose.material3.adaptive:adaptive-layout' implementation 'androidx.compose.material3.adaptive:adaptive-navigation'
- adaptif — Elemen penyusun tingkat rendah seperti
HingeInfo
danPosture
- Adaptive-layout — Tata letak adaptif seperti
ListDetailPaneScaffold
danSupportingPaneScaffold
- navigasi-adaptif — Composable untuk menavigasi di dalam dan antar-panel
Penggunaan dasar
Terapkan ListDetailPaneScaffold
sebagai berikut:
Gunakan class yang mewakili konten yang akan dipilih. Kelas ini harus
Parcelable
untuk mendukung penyimpanan dan memulihkan item daftar yang dipilih. Menggunakan paket kotlin-parcelize plugin untuk membuat kode untuk Anda.@Parcelize class MyItem(val id: Int) : Parcelable
Membuat
ThreePaneScaffoldNavigator
denganrememberListDetailPaneScaffoldNavigator
, lalu tambahkanBackHandler
. Ini navigator digunakan untuk berpindah antara panel daftar, detail, dan ekstra. Menurut mendeklarasikan tipe generik, navigator juga melacak status scaffold (yaitu,MyItem
yang ditampilkan). Karena jenis ini parcelable, status dapat disimpan dan dipulihkan oleh navigator ke secara otomatis menangani perubahan konfigurasi. TujuanBackHandler
menyediakan dukungan untuk menavigasi kembali menggunakan {i>gesture <i}kembali sistem atau tombol. Perilaku yang diharapkan dari tombol kembali untukListDetailPaneScaffold
bergantung pada ukuran jendela dan scaffold saat ini dengan sejumlah nilai. JikaListDetailPaneScaffold
dapat mendukung pengembalian dengan status saat ini, selanjutnyacanNavigateBack()
adalahtrue
, yang 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. Kemudian gunakanThreePaneScaffoldNavigator
untuk membuka panel detail,ListDetailPaneScaffoldRole.Detail
, dan tampilkan 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 yang dibuka oleh aplikasi, termasuk konten yang ditampilkan dalam panel. Tujuan Properticontent
adalah jenis yang sama dengan yang ditentukan dalam panggilan remember asli (MyItem
dalam contoh ini), sehingga Anda juga dapat mengakses properti untuk semua data 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) } } }, )