Tata letak kanonis panel pendukung memfokuskan perhatian pengguna ke elemen konten sekaligus menampilkan konten pendukung yang relevan. Misalnya, panel konten mungkin menampilkan informasi tentang film terbaru sekaligus yang menampilkan daftar film lain yang memiliki tema serupa atau sutradara atau aktor yang dibintangi. Untuk mengetahui informasi selengkapnya tentang panel pendukung tata letak kanonis, lihat Panduan panel pendukung Material 3.
Mengimplementasikan panel pendukung
SupportingPaneScaffold
terdiri dari maksimal tiga
panel: panel utama, panel pendukung, dan panel tambahan opsional. Scaffold
menangani semua kalkulasi untuk mengalokasikan
ruang jendela ke tiga panel. Aktif
layar besar, scaffold menampilkan panel utama dengan panel pendukung
bagian samping. Pada layar kecil, scaffold akan menampilkan elemen utama atau pendukung
panel layar penuh.
![Konten utama yang mengisi sebagian besar layar dengan konten pendukung.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/supporting-pane.png?authuser=0000&hl=id)
Menambahkan dependensi
SupportingPaneScaffold
adalah bagian dari
Library tata letak adaptif Material 3.
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
- tata letak adaptif — Tata letak adaptif, seperti
SupportingPaneScaffold
- navigasi-adaptif — Composable untuk menavigasi di dalam dan antar-panel
Membuat navigator dan scaffold
Di jendela kecil, hanya satu panel yang ditampilkan dalam satu waktu, jadi gunakan
ThreePaneScaffoldNavigator
untuk dipindahkan ke dan dari
Google Analytics. Buat instance navigator dengan
rememberSupportingPaneScaffoldNavigator
Untuk menangani gestur kembali, gunakan BackHandler
yang memeriksa
canNavigateBack()
dan panggilan telepon
navigateBack()
:
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
Scaffold memerlukan PaneScaffoldDirective
, yang
mengontrol cara membagi layar dan berapa banyak spasi yang digunakan, dan
ThreePaneScaffoldValue
, yang memberikan
status panel (seperti apakah panel diperluas atau tersembunyi). Untuk default
gunakan scaffoldDirective
navigator dan
scaffoldValue
:
SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { /*...*/ }, supportingPane = { /*...*/ }, )
Panel utama dan panel pendukung adalah composable yang berisi konten Anda. Gunakan
AnimatedPane
untuk menerapkan animasi panel default selama
navigasi. Gunakan nilai scaffold untuk memeriksa apakah panel pendukung
disembunyikan; jika demikian, tampilkan tombol yang memanggil
navigateTo(ThreePaneScaffoldRole.Secondary)
untuk menampilkan
panel pendukung.
Berikut adalah implementasi scaffold yang lengkap:
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { AnimatedPane(modifier = Modifier.safeContentPadding()) { // Main pane content if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) { Button( modifier = Modifier.wrapContentSize(), onClick = { navigator.navigateTo(SupportingPaneScaffoldRole.Supporting) } ) { Text("Show supporting pane") } } else { Text("Supporting pane is shown") } } }, supportingPane = { AnimatedPane(modifier = Modifier.safeContentPadding()) { // Supporting pane content Text("Supporting pane") } }, )
Mengekstrak composable panel
Ekstrak masing-masing panel SupportingPaneScaffold
ke dalam masing-masing panel
composable agar dapat digunakan kembali dan dapat diuji. Gunakan
ThreePaneScaffoldScope
untuk mengakses AnimatedPane
jika
Anda ingin menggunakan animasi {i>default<i}:
@Composable fun ThreePaneScaffoldScope.MainPane( shouldShowSupportingPaneButton: Boolean, onNavigateToSupportingPane: () -> Unit, modifier: Modifier = Modifier, ) { AnimatedPane(modifier = modifier.safeContentPadding()) { // Main pane content if (shouldShowSupportingPaneButton) { Button(onClick = onNavigateToSupportingPane) { Text("Show supporting pane") } } else { Text("Supporting pane is shown") } } } @Composable fun ThreePaneScaffoldScope.SupportingPane( modifier: Modifier = Modifier, ) { AnimatedPane(modifier = modifier.safeContentPadding()) { // Supporting pane content Text("This is the supporting pane") } }
Mengekstrak panel ke dalam composable menyederhanakan penggunaan
SupportingPaneScaffold
(bandingkan kode berikut dengan implementasi lengkap
scaffold di bagian sebelumnya):
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { MainPane( shouldShowSupportingPaneButton = navigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden, onNavigateToSupportingPane = { navigator.navigateTo(ThreePaneScaffoldRole.Secondary) } ) }, supportingPane = { SupportingPane() }, )