← 返回 Android 词条

底部滑出面板

Android原生支持

在 Android 上叫Bottom Sheet

也叫 Modal Bottom Sheet

Compose: ModalBottomSheet|View: BottomSheetDialogFragment

适用范围:Android 手机 / 平板;不含 Wear OS、TV、Auto

Material Design 里分 Modal(挡住交互)和 Standard(不挡)两种。Android 是三个平台里对这个组件规范最细的。

从屏幕底部向上滑出、盖住部分屏幕的临时面板。背后的页面通常会变暗但还看得见,往下拖或点背景就能关掉。

  • 从下面滑上来的框
  • 微信分享那个面板
  • 半个屏幕的弹窗
  • 底部弹窗
  • 上拉面板
  • 底部抽屉
  • 半屏弹窗

其他平台的相似实现

Web需自己实现
该平台没有原生实现

Web 没有专门的底部面板元素,现有 dialog 只提供对话框语义,不会直接产生从底部滑出的面板。

看 Web 视角 →

使用规范

什么时候用

  • 在不离开当前页面的前提下,让用户完成一个短任务(选择、填表、确认)
  • 内容量中等,一屏到两屏之间
  • 需要保留上下文,让用户知道自己还在原来那个页面

什么时候别用

  • 内容很长或有多层级导航 → 用整页(Full Screen / Push)
  • 只是要用户二选一确认 → 用 Alert / Dialog
  • 只是给一列操作选项 → iOS 用 Action Sheet,Web/Android 用 Menu

容易混淆

Android 出处

查看 Web / iOS / Android 完整对照 →概念页上还有可交互示例,以及 Web 的提示词。