还在频繁地使用弹窗对用户展示重要提示吗？明知这样有损体验却没有更好的选择吗？那么不妨来试试干扰度更低，却依然可以用于重要提示的 Sheet 控件吧。

什么是Sheets

Sheets 控件并非弹窗，通常会被熟称为「浮层」或「浮窗」。

该控件在 iOS 和 Android 系统规范中都有相关定义，属于多才多艺的控件，可以用于给予信息提示，也可用于展示更多的拓展信息。

从用于提示的角度来看，Sheets 控件和 Dialogs 控件的相同点和不同点在哪里呢？

1. 共同点

模态化

二者都可以设置模态，当模态控件显示时，页面背景会显示深色遮罩，并立即打断用户当前操作。

承载操作和信息

二者都可以承载丰富的操作和信息，支持嵌入列表、选择器等控件及图片、文本信息。

2. 不同点

触发方式不同

Dialog 可以不通过用户操作而自动触发，Sheet 必须通过用户操作才可以触发显示，因此用户对 Sheet 的显示会更有预期。

关闭方式不同

Dialog 的关闭方式较少，通常会要求用户进行选项操作后才可关闭；Sheet 的关闭方式较多，对于用户而言有更丰富的选择权。

因此综上所述，我们可以发现，Sheet 对比 Dialog 的优势在于，它的显示会更符合用户的预期，它的干扰层度也会低于Dialog（因为更易关闭）。

• Sheets 在 Google Material design 规范中被分为了 Bottom sheest 和 Side sheets 两类；
• 在 iOS Human Interface Guidelines 中被分为了 Action sheets 和 Activity views 两类。

下面就由我来依次详解其特性和玩法吧。

Bottom sheets 底部浮窗

专属于 Android 的 Sheets 控件。

1. 使用场景

用于补充内容相关的更多信息（非模态）、提供可交互的菜单或对话（模态）或其它关键功能/任务的拓展。

2. 注意事项

• Bottom sheet 通常用于 Android 竖屏场景，在 Android 横屏场景建议使用 Side sheet。
• 在 iOS 中不建议使用 Bottom sheet，建议使用原生的 Action sheets 或 Activity views。

3. 样式类型

菜单样式

可嵌套 Menus，展示多个选项内容。

宫格样式

可使用宫格布局，展示多个选项内容。

迷你样式（非模态）

一个非模态底部浮窗可被设置固定展示在页面底部，用户可以随时用它来对其它功能/任务进行快捷操作，如进入购物车、查看所选图片、查看聊天和查看刚才的视频等。

4. 模态/非模态

非模态浮窗：如左下图所示，非模态浮窗与内容保持在同一层级，用户可同时对内容和浮窗进行操作。

模态浮窗：如右下图所示，模态浮窗层级高于内容，背景深色显示遮罩，用户仅能对浮窗进行操作。

5. 显示与消失

显示

浮窗显示时从底部向上滑入，非模态浮窗显示时不会打断用户操作，模态浮窗显示时会显示深色遮罩以打断用户操作。

消失

浮窗消失时会向底部滑出。

模态浮窗在以下情况下会消失：

• 用户触发浮窗上的对应操作（自定义）；
• 用户点击浮窗外的区域；
• 用户下拉浮窗达到收起阈值后（自定义）；
• 用户点击 Android 系统返回键。

非模态浮窗在以下情况下会消失：用户选中浮窗上的对应按钮（自定义）。

6. 支持高度延伸

当浮窗底部仍有未显示的内容时，可设置通过滑动或拖动浮窗来使其变为全屏展示，并在顶部显示 Toolbar 来展示关闭/收起操作。