Menggunakan inset Material 3

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Untuk memudahkan penggunaan, banyak composable Material 3 bawaan (androidx.compose.material3) menangani inset sendiri, berdasarkan cara composable ditempatkan di aplikasi Anda sesuai dengan spesifikasi Material.

Composable penanganan inset

Berikut adalah daftar Komponen Material yang otomatis menangani inset.

Panel aplikasi

• TopAppBar / SmallTopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: Menerapkan sisi atas dan horizontal panel sistem sebagai padding karena digunakan di bagian atas jendela.
• BottomAppBar: Menerapkan sisi bawah dan horizontal kolom sistem sebagai padding.

Penampung konten

• ModalDrawerSheet / DismissibleDrawerSheet / PermanentDrawerSheet (konten di dalam panel navigasi modal): Menerapkan inset vertikal dan awal ke konten.
• ModalBottomSheet: Menerapkan inset bawah.
• NavigationBar : Menerapkan inset bawah dan horizontal.
• NavigationRail: Menerapkan inset vertikal dan awal.

Scaffold

Secara default, Scaffold menyediakan inset sebagai parameter paddingValues untuk Anda gunakan dan konsumsi. Scaffold tidak menerapkan inset ke konten; tanggung jawab ini adalah milik Anda. Misalnya, untuk menggunakan inset ini dengan LazyColumn di dalam Scaffold:

Scaffold { innerPadding ->
    // innerPadding contains inset information for you to use and apply
    LazyColumn(
        // consume insets as scaffold doesn't do it by default
        modifier = Modifier.consumeWindowInsets(innerPadding),
        contentPadding = innerPadding
    ) {
        // ..
    }
}
InsetsSnippets.kt

Video berikut menunjukkan LazyColumn dalam Scaffold dengan layar dari tepi ke tepi dinonaktifkan dan diaktifkan:

Mengganti inset default

Anda dapat mengubah parameter windowInsets yang diteruskan ke composable untuk mengonfigurasi perilaku composable. Parameter ini dapat berupa jenis inset jendela yang berbeda untuk diterapkan, atau dinonaktifkan dengan meneruskan instance kosong: WindowInsets(0, 0, 0, 0).

Misalnya, untuk menonaktifkan penanganan inset di LargeTopAppBar, tetapkan parameter windowInsets ke instance kosong:

LargeTopAppBar(
    windowInsets = WindowInsets(0, 0, 0, 0),
    title = {
        Text("Hi")
    }
)
InsetsSnippets.kt