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.
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 applyLazyColumn(// consume insets as scaffold doesn't do it by defaultmodifier=Modifier.consumeWindowInsets(innerPadding),contentPadding=innerPadding){// ..}}
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
lain yang akan 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:
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-08-24 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-08-24 UTC."],[],[],null,["# Use Material 3 insets\n\nFor ease of use, many of the built-in Material 3 composables\n([`androidx.compose.material3`](/reference/kotlin/androidx/compose/material3/package-summary))\nhandle insets themselves, based on how the composables are placed in your app\naccording to the Material specifications.\n| **Note:** Material 2 Components ([`androidx.compose.material`](/reference/kotlin/androidx/compose/material/package-summary)) don't automatically handle insets themselves. However, you can get access to the insets and apply them manually. In [`androidx.compose.material 1.6.0`](/jetpack/androidx/releases/compose-material#1.6.0-alpha03) and later use the `windowInsets` parameter to apply the insets manually for [`BottomAppBar`](/reference/kotlin/androidx/compose/material/package-summary#BottomAppBar(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)), [`TopAppBar`](/reference/kotlin/androidx/compose/material/package-summary#TopAppBar(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)), [`BottomNavigation`](/reference/kotlin/androidx/compose/material/package-summary#BottomNavigation(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,kotlin.Function1)), and [`NavigationRail`](/reference/kotlin/androidx/compose/material/package-summary#NavigationRail(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,kotlin.Function1,kotlin.Function1)). Likewise, use the `contentWindowInsets` parameter for [`Scaffold`](/reference/kotlin/androidx/compose/material/package-summary#Scaffold(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.material.ScaffoldState,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.material.FabPosition,kotlin.Boolean,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)). Otherwise, apply the insets manually as padding.\n\nInset handling composables\n--------------------------\n\nThe following is a list of the [Material\nComponents](/reference/kotlin/androidx/compose/material3/package-summary) that\nautomatically handle insets.\n\nApp bars\n--------\n\n- [`TopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) / [`SmallTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#SmallTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) / [`CenterAlignedTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#CenterAlignedTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) / [`MediumTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#MediumTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) / [`LargeTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#LargeTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)): Applies the *top* and *horizontal* sides of the system bars as padding since it is used at the top of the window.\n- [`BottomAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#BottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)): Applies the *bottom* and *horizontal* sides of the system bars as padding.\n\n### Content containers\n\n- [`ModalDrawerSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalDrawerSheet(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) / [`DismissibleDrawerSheet`](/reference/kotlin/androidx/compose/material3/package-summary#DismissibleDrawerSheet(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) / [`PermanentDrawerSheet`](/reference/kotlin/androidx/compose/material3/package-summary#PermanentDrawerSheet(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) (content inside a modal navigation drawer): Applies *vertical* and *start* insets to content.\n- [`ModalBottomSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalBottomSheet(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.SheetState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,kotlin.Function0,kotlin.Function1)): Applies the *bottom* insets.\n- [`NavigationBar`](/reference/kotlin/androidx/compose/material3/package-summary#NavigationBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) : Applies the *bottom* and *horizontal* insets.\n- [`NavigationRail`](/reference/kotlin/androidx/compose/material3/package-summary#NavigationRail(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)): Applies the *vertical* and *start* insets.\n\n### Scaffold\n\nBy default,\n[`Scaffold`](/reference/kotlin/androidx/compose/material3/package-summary#Scaffold(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.FabPosition,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1))\nprovides insets as parameter `paddingValues` for you to consume and use.\n`Scaffold` does not apply the insets to content; this responsibility is yours.\nFor example, to consume these insets with a `LazyColumn` inside a `Scaffold`:\n\n\n```kotlin\nScaffold { innerPadding -\u003e\n // innerPadding contains inset information for you to use and apply\n LazyColumn(\n // consume insets as scaffold doesn't do it by default\n modifier = Modifier.consumeWindowInsets(innerPadding),\n contentPadding = innerPadding\n ) {\n // ..\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/InsetsSnippets.kt#L124-L133\n```\n\n\u003cbr /\u003e\n\nThe following video shows a `LazyColumn` within a `Scaffold` with edge-to-edge\ndisplay disabled and enabled:\nAlas, your browser doesn't support HTML5 video. That's OK! You can still [download the video](/static/develop/ui/compose/images/layouts/insets/LazyColumn_E2E.mp4) and watch it with a video player.\n\nOverride default insets\n-----------------------\n\nYou can change the `windowInsets` parameter passed to the composable to\nconfigure the composable's behavior. This parameter can be a different type of\nwindow inset to apply instead, or disabled by passing an empty instance:\n`WindowInsets(0, 0, 0, 0)`.\n\nFor example, to disable the inset handling on\n[`LargeTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#LargeTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)),\nset the `windowInsets` parameter to an empty instance:\n\n\n```kotlin\nLargeTopAppBar(\n windowInsets = WindowInsets(0, 0, 0, 0),\n title = {\n Text(\"Hi\")\n }\n)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/InsetsSnippets.kt#L142-L147\n```\n\n\u003cbr /\u003e"]]