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 otomatis menangani inset.

Panel aplikasi

• TopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: Menerapkan sisi atas dan horizontal kolom sistem sebagai padding karena digunakan di bagian atas jendela.
• BottomAppBar: Menerapkan sisi bawah dan horizontal dari 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 bottom.
• NavigationBar: Menerapkan inset bottom dan horizontal.
• NavigationRail: Menerapkan inset vertical 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:

Menggunakan parameter PaddingValues di Scaffold umumnya sudah cukup untuk menyisipkan UI Anda agar tidak tumpang tindih dengan UI sistem dan potongan layar. Hindari penggunaan pendekatan penanganan inset tambahan seperti penggaris, pengubah padding, atau pengubah ukuran inset jika menggunakan Scaffold untuk menghindari penerapan terlalu banyak padding ke UI Anda.

Mengganti inset default

Anda dapat mengubah parameter windowInsets yang diteruskan ke composable untuk mengonfigurasi perilaku composable. Parameter ini dapat berupa jenis inset jendela lain yang akan 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