Membangun tata letak panel pendukung

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.
Gambar 1. Tata letak panel pendukung.

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 dan Posture
  • 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()
}
SampleSupportingPaneScaffold.kt

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 = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

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")
        }
    },
)
SampleSupportingPaneScaffold.kt

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")
    }
}
SampleSupportingPaneScaffold.kt

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() },
)
SampleSupportingPaneScaffold.kt

Sebelumnya
Membuat tata letak daftar-detail
Berikutnya
Garis perataan