Bottom sheet 底部抽屉
/BOT-um SHEET/ · noun · 浮层类模式 · #044
从底部滑上来的卡片，处理一个快速子任务，同时让父级界面保持可见。
别名：底部弹窗。
你可能会这样叫它
- “从下往上滑出的面板”
- “底部弹出菜单”
- “可以往上拖的半屏弹窗”
- “上拉面板”
- “底部浮层”
……它的名字是 底部抽屉（Bottom sheet）。
常见问题
底部抽屉（Bottom sheet）和模态弹窗有什么区别？
模态弹窗会打断：停在屏幕中间，要求先做决定。底部抽屉是从底边接着当前任务往下做。底部抽屉本身也分模态（压暗并挡住背后的页面，iOS 的 sheet 一律如此）和标准（背后页面仍可操作）两种。侧边抽屉（Drawer）又不同：从侧面滑出，放的是导航。
底部弹窗的英文叫什么？
Bottom sheet（底部抽屉）：从屏幕底缘滑上来处理快速子任务的卡片，父级界面保持可见。iOS 叫 sheet，Material Design 分标准与模态两种。
代码里叫什么
| SwiftUI | .sheet() .presentationDetents() |
|---|---|
| UIKit | UISheetPresentationController |
| Jetpack Compose | ModalBottomSheet BottomSheetScaffold |
| Android (Views) | BottomSheetDialogFragment BottomSheetBehavior |
| Flutter | showModalBottomSheet() DraggableScrollableSheet |
| Web (HTML) | <dialog> 没有原生的底部抽屉，通常是固定在底边的 <dialog> |
复制给 AI 编程工具
加一个底部抽屉（Bottom sheet）：点击触发按钮后，面板从屏幕底边滑上来。打开期间压暗并挡住背后的页面，顶部显示拖动把手，默认打开到半屏，往上拖可以展开到全屏。向下滑、点击暗色区域或按 Esc 都能关闭，关闭后焦点回到触发按钮。