← 返回 iOS 词条
底部滑出面板
在 iOS 上叫Sheet
SwiftUI: .sheet(isPresented:) / .presentationDetents()|UIKit: UISheetPresentationController
Apple 管这个叫 Sheet。注意跟 Action Sheet 区分——后者是底部弹出的一列按钮,属于另一个概念。半屏效果靠 presentationDetents 控制。
从屏幕底部向上滑出、盖住部分屏幕的临时面板。背后的页面通常会变暗但还看得见,往下拖或点背景就能关掉。
- 从下面滑上来的框
- 微信分享那个面板
- 半个屏幕的弹窗
- 底部弹窗
- 上拉面板
- 底部抽屉
- 半屏弹窗
其他平台的相似实现
Web需自己实现
该平台没有原生实现Web 没有专门的底部面板元素,现有 dialog 只提供对话框语义,不会直接产生从底部滑出的面板。
看 Web 视角 →Android原生支持
Bottom Sheet异名Material Design 里分 Modal(挡住交互)和 Standard(不挡)两种。
看 Android 视角 →使用规范
什么时候用
- 在不离开当前页面的前提下,让用户完成一个短任务(选择、填表、确认)
- 内容量中等,一屏到两屏之间
- 需要保留上下文,让用户知道自己还在原来那个页面
什么时候别用
- 内容很长或有多层级导航 → 用整页(Full Screen / Push)
- 只是要用户二选一确认 → 用 Alert / Dialog
- 只是给一列操作选项 → iOS 用 Action Sheet,Web/Android 用 Menu
容易混淆
iOS 出处
查看 Web / iOS / Android 完整对照 →概念页上还有可交互示例,以及 Web 的提示词。