สร้างชีตด้านล่าง
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ชีตด้านล่างแสดงเนื้อหารองที่ยึดอยู่ที่ด้านล่างของหน้าจอ
ความเข้ากันได้ของเวอร์ชัน
การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป
ทรัพยากร Dependency
ใช้ Bottom Sheet
หากต้องการใช้ Bottom Sheet ให้ใช้คอมโพสิชัน ModalBottomSheet ดังนี้
ขยายและยุบชีต
หากต้องการขยายและยุบชีต ให้ใช้ SheetState ดังนี้
ข้อมูลสำคัญ
- ใช้ช่อง
content ซึ่งใช้ ColumnScope เพื่อวางองค์ประกอบที่คอมโพสได้ของชีตในคอลัมน์
- ใช้
rememberSheetState เพื่อสร้างอินสแตนซ์ของ SheetState ที่ส่งไปยัง ModalBottomSheet ด้วยพารามิเตอร์ sheetState
SheetState ให้สิทธิ์เข้าถึงฟังก์ชัน show และ hide รวมถึงพร็อพเพอร์ตี้ที่เกี่ยวข้องกับสถานะชีตปัจจุบัน ฟังก์ชันเหล่านี้ต้องใช้ CoroutineScope เช่น rememberCoroutineScope และสามารถเรียกให้แสดงเพื่อตอบสนองต่อเหตุการณ์ UI
อย่าลืมนำ ModalBottomSheet ออกจากองค์ประกอบเมื่อคุณซ่อนชีตด้านล่าง
ผลลัพธ์
รูปที่ 1 Bottom Sheet มาตรฐาน (ซ้าย) และ Bottom Sheet แบบโมดัล (ขวา)
คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้
แสดงคอมโพเนนต์แบบอินเทอร์แอกทีฟ
ดูวิธีที่ฟังก์ชันคอมโพสิเบิลช่วยให้คุณสร้างคอมโพเนนต์ UI ที่สวยสะดุดตาตามระบบการออกแบบ Material Design ได้อย่างง่ายดาย
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-02-06 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-02-06 UTC"],[],[],null,["# Create a bottom sheet\n\n\u003cbr /\u003e\n\nA bottom sheet shows secondary content, anchored to the bottom of the screen.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nImplement a bottom sheet\n------------------------\n\nTo implement a [bottom sheet](https://m3.material.io/components/bottom-sheets/overview), use the [`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))\ncomposable:\n\n\u003cbr /\u003e\n\n```kotlin\nModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {\n // Sheet content\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L364-L366\n \n```\n\n\u003cbr /\u003e\n\nExpand and collapse the sheet\n-----------------------------\n\nTo expand and collapse the sheet, use [`SheetState`](/reference/kotlin/androidx/compose/material3/SheetState):\n\n\u003cbr /\u003e\n\n```kotlin\nval sheetState = rememberModalBottomSheetState()\nval scope = rememberCoroutineScope()\nvar showBottomSheet by remember { mutableStateOf(false) }\nScaffold(\n floatingActionButton = {\n ExtendedFloatingActionButton(\n text = { Text(\"Show bottom sheet\") },\n icon = { Icon(Icons.Filled.Add, contentDescription = \"\") },\n onClick = {\n showBottomSheet = true\n }\n )\n }\n) { contentPadding -\u003e\n // Screen content\n\n if (showBottomSheet) {\n ModalBottomSheet(\n onDismissRequest = {\n showBottomSheet = false\n },\n sheetState = sheetState\n ) {\n // Sheet content\n Button(onClick = {\n scope.launch { sheetState.hide() }.invokeOnCompletion {\n if (!sheetState.isVisible) {\n showBottomSheet = false\n }\n }\n }) {\n Text(\"Hide bottom sheet\")\n }\n }\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L370-L408\n \n```\n\n\u003cbr /\u003e\n\n### Key points\n\n- Use the `content` slot, which uses a [`ColumnScope`](/reference/kotlin/androidx/compose/foundation/layout/ColumnScope) to lay out sheet content composables in a column.\n- Use [`rememberSheetState`](/reference/kotlin/androidx/compose/material3/package-summary#rememberSheetState(kotlin.Boolean,kotlin.Function1)) to create an instance of `SheetState` that you pass to `ModalBottomSheet` with the `sheetState` parameter.\n- `SheetState` provides access to the [`show`](/reference/kotlin/androidx/compose/material3/SheetState#show()) and [`hide`](/reference/kotlin/androidx/compose/material3/SheetState#hide()) functions\n and to properties related to the current sheet state. These functions\n require a `CoroutineScope` --- for example, [`rememberCoroutineScope`](/reference/kotlin/androidx/compose/runtime/package-summary#remembercoroutinescope) ---\n and can be called in response to UI events.\n\n- Make sure to remove the `ModalBottomSheet` from composition when you hide\n the bottom sheet.\n\nResults\n-------\n\n\n**Figure 1.** A standard bottom sheet (left) and a modal bottom sheet (right).\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
