Menggunakan inset Material 3

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.

Catatan: Komponen Material 2 (androidx.compose.material) tidak otomatis menangani inset sendiri. Namun, Anda dapat memperoleh akses ke inset dan menerapkannya secara manual. Di androidx.compose.material 1.6.0 dan yang lebih baru, gunakan parameter windowInsets untuk menerapkan inset secara manual bagi BottomAppBar, TopAppBar, BottomNavigation, dan NavigationRail. Demikian pula, gunakan parameter contentWindowInsets untuk Scaffold. Jika tidak, terapkan inset secara manual sebagai padding.

Composable penanganan inset

Berikut adalah daftar Komponen Material yang secara otomatis menangani inset.

Panel aplikasi

• TopAppBar / SmallTopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: Menerapkan sisi atas dan horizontal kolom 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 start.

Scaffold

Secara default, Scaffold menyediakan inset sebagai parameter paddingValues untuk Anda gunakan. Scaffold tidak menerapkan inset ke konten; tanggung jawab ini ada pada 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 tampilan layar penuh 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 pada LargeTopAppBar, tetapkan parameter windowInsets ke instance kosong:

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