Menggunakan inset Material 3

Untuk kemudahan penggunaan, banyak composable Material 3 bawaan (androidx.compose.material3) menangani inset sendiri, berdasarkan penempatan composable 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 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 awal.

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 edge-to-edge yang dinonaktifkan dan diaktifkan:

Menggunakan parameter PaddingValues di Scaffold umumnya cukup untuk menyisipkan UI Anda dari UI sistem dan tampilan yang terpotong. 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 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