Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Anda dapat menampilkan sheet bawah sebagian, lalu mengizinkan pengguna untuk menjadikannya
layar penuh atau menutupnya.
Untuk melakukannya, teruskan ModalBottomSheet Anda instance SheetState
dengan skipPartiallyExpanded ditetapkan ke false.
Contoh
Contoh ini menunjukkan cara menggunakan properti sheetState dari
ModalBottomSheet untuk menampilkan sheet hanya sebagian pada awalnya:
@ComposablefunPartialBottomSheet(){varshowBottomSheetbyremember{mutableStateOf(false)}valsheetState=rememberModalBottomSheetState(skipPartiallyExpanded=false,)Column(modifier=Modifier.fillMaxWidth(),horizontalAlignment=Alignment.CenterHorizontally,){Button(onClick={showBottomSheet=true}){Text("Display partial bottom sheet")}if(showBottomSheet){ModalBottomSheet(modifier=Modifier.fillMaxHeight(),sheetState=sheetState,onDismissRequest={showBottomSheet=false}){Text("Swipe up to open sheet. Swipe down to dismiss.",modifier=Modifier.padding(16.dp))}}}}
sheetState adalah instance SheetState dengan
skipPartiallyExpanded bernilai salah (false).
ModalBottomSheet menggunakan pengubah yang memastikan pengisian layar
saat diluaskan sepenuhnya.
ModalBottomSheet menggunakan sheetState sebagai nilai untuk parameter sheetState-nya.
Akibatnya, spreadsheet hanya ditampilkan sebagian saat pertama kali dibuka. Pengguna kemudian dapat menarik atau menggesernya untuk menjadikannya layar penuh atau menutupnya.
Lambda onDismissRequest mengontrol apa yang terjadi saat pengguna mencoba menutup sheet bawah. Dalam hal ini, hanya sheet yang dihapus.
Hasil
Saat pengguna pertama kali menekan tombol, sheet akan ditampilkan sebagian:
Gambar 1. Sheet bawah ditampilkan sebagian.
Jika pengguna menggeser ke atas pada sheet, sheet akan mengisi layar:
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-30 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-30 UTC."],[],[],null,["You can partially show a [bottom sheet](/develop/ui/compose/components/bottom-sheets) and then let the user either make it\nfull screen or dismiss it.\n\nTo do so, pass your [`ModalBottomSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalBottomSheet(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.SheetState,androidx.compose.ui.unit.Dp,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.Function0,androidx.compose.material3.ModalBottomSheetProperties,kotlin.Function1)) an instance of [`SheetState`](/reference/kotlin/androidx/compose/material3/SheetState)\nwith `skipPartiallyExpanded` set to `false`.\n| **Note:** `ModalBottomSheet` is experimental. File any issues on the [issue\n| tracker](https://issuetracker.google.com/issues/new?component=856989&template=1425922).\n\nExample\n\nThis example demonstrates how you can use the `sheetState` property of\n`ModalBottomSheet` to display the sheet only partially at first:\n\n\n```kotlin\n@Composable\nfun PartialBottomSheet() {\n var showBottomSheet by remember { mutableStateOf(false) }\n val sheetState = rememberModalBottomSheetState(\n skipPartiallyExpanded = false,\n )\n\n Column(\n modifier = Modifier.fillMaxWidth(),\n horizontalAlignment = Alignment.CenterHorizontally,\n ) {\n Button(\n onClick = { showBottomSheet = true }\n ) {\n Text(\"Display partial bottom sheet\")\n }\n\n if (showBottomSheet) {\n ModalBottomSheet(\n modifier = Modifier.fillMaxHeight(),\n sheetState = sheetState,\n onDismissRequest = { showBottomSheet = false }\n ) {\n Text(\n \"Swipe up to open sheet. Swipe down to dismiss.\",\n modifier = Modifier.padding(16.dp)\n )\n }\n }\n }\n}https://github.com/android/snippets/blob/f95ab59fad80aeaf5d6a90bab8a01a126f20f44e/compose/snippets/src/main/java/com/example/compose/snippets/components/BottomSheet.kt#L41-L71\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\nIn this example, note the following:\n\n- `showBottomSheet` controls whether the app displays the bottom sheet.\n- `sheetState` is an instance of [`SheetState`](/reference/kotlin/androidx/compose/material3/SheetState) where `skipPartiallyExpanded` is false.\n- [`ModalBottomSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalBottomSheet(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.SheetState,androidx.compose.ui.unit.Dp,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.Function0,androidx.compose.material3.ModalBottomSheetProperties,kotlin.Function1)) takes a modifier that ensures it fills the screen when fully expanded.\n- `ModalBottomSheet` takes `sheetState` as the value for its `sheetState` parameter.\n - As a result, the sheet only partially displays when first opened. The user can then drag or swipe it to make it full screen or dismiss it.\n- The `onDismissRequest` lambda controls what happens when the user tries to dismiss the bottom sheet. In this case, it only removes the sheet.\n\nResults\n\nWhen the user first presses the button, the sheet displays partially:\n**Figure 1.** Partially displayed bottom sheet.\n\nIf the user swipes up on the sheet, it fills the screen:\n**Figure 2.** Full-screen bottom sheet. **Note:** If you set `skipPartiallyExpanded` to true, the sheet opens immediately to full screen.\n\nAdditional resources\n\n- [Bottom sheets](/develop/ui/compose/components/bottom-sheets)"]]