一、什么是Sheets
Sheets控件并非弹窗，通常会被熟称为“浮层”或“浮窗”，该控件在iOS和Android系统规范中都有相关定义，属于多才多艺的控件，可以用于给予信息提示，也可用于展示更多的拓展信息。
从用于提示的角度来看，Sheets控件和Dialogs控件的相同点和不同点在哪里呢？
先说下共同点：
1.模态化
二者都可以设置模态，当模态控件显示时，页面背景会显示深色遮罩，并立即打断用户当前操作。
2.承载操作和信息
二者都可以承载丰富的操作和信息，支持嵌入列表、选择器等控件及图片、文本信息。
再来看一下二者的不同点：
1.触发方式不同
Dialog可以不通过用户操作而自动触发，Sheet必须通过用户操作才可以触发显示，因此用户对Sheet的显示会更有预期。
2.关闭方式不同
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.Bottom sheet通常用于Android竖屏场景，在Android横屏场景建议使用Side sheet;
2.在iOS中不建议使用Bottom sheet,建议使用原生的Action sheet或Activity views。
样式类型
1.菜单样式
可嵌套Menus，展示多个选项内容。
2.宫格样式
可使用宫格布局，展示多个选项内容。
3.迷你样式（非模态）
一个非模态底部浮窗可被设置固定展示在页面底部，用户可以随时用它来对其它功能/任务进行快捷操作，如进入购物车、查看所选图片、查看聊天和查看刚才的视频等。
模态/非模态
如左下图所示，非模态浮窗与内容保持在同一层级，用户可同时对内容和浮窗进行操作；
如右下图所示，模态浮窗层级高于内容，背景深色显示遮罩，用户仅能对浮窗进行操作。
显示与消失
显示
浮窗显示时从底部向上滑入，非模态浮窗显示时不会打断用户操作，模态浮窗显示时会显示深色遮罩以打断用户操作。
消失
浮窗消失时会向底部滑出。
模态浮窗在以下情况下会消失：1.用户触发浮窗上的对应操作（自定义）；2.用户点击浮窗外的区域；3.用户下拉浮窗达到收起阈值后（自定义）；4.用户点击Android系统返回键。
非模态浮窗在以下情况下会消失：用户选中浮窗上的对应按钮（自定义）。
支持高度延伸
当浮窗底部仍有未显示的内容时，可设置通过滑动或拖动浮窗来使其变为全屏展示，并在顶部显示Toolbar来显示关闭/收起操作。
支持深层链接
模态浮窗中可以展示其它应用的深层链接内容或操作，譬如调用Google翻译。
范例
抖音的评论功能使用的是模态Bottom sheet；百度地图的路线切换功能使用的是非模态Bottom sheet。
Side sheets 侧边浮窗
专属于Android的Sheets控件。
使用场景
用于补充内容相关的更多信息（非模态）或提供可交互的列表信息（模态）。
注意事项
1.Bottom sheet通常用于Android竖屏场景，在Android横屏场景建议使用Side sheet;
2.在iOS中不建议使用Bottom sheet,建议使用原生的Action sheet或Activity views。
样式类型
1.菜单样式
可嵌套Menus，展示多个选项内容。
2.宫格样式
可使用宫格布局，展示多个选项内容。
模态/非模态
如左下图所示，非模态浮窗与内容保持在同一层级，用户可同时对内容和浮窗进行操作（在移动端较少使用，通常用于PC端）；如右下图所示，模态浮窗层级高于内容，背景深色显示遮罩，用户仅能对浮窗进行操作。
显示与消失
显示
浮窗显示时从左/右边缘滑入，非模态浮窗显示时不会打断用户操作，模态浮窗显示时会显示深色遮罩以打断用户操作。
消失
浮窗消失时会向左/右边缘滑出。
模态浮窗在以下情况下会消失：1.用户触发浮窗上的对应操作（自定义）；2.用户点击浮窗外的区域；3.用户侧拉浮窗达到收起阈值后（自定义）；4.用户点击Android系统返回键。
非模态浮窗在以下情况下会消失：用户选中浮窗上的对应按钮（自定义）。
滑动说明
支持上下滑动，不支持左右滑动。
范例
淘宝的筛选功能使用的是Side sheet。
Action sheets 操作浮窗
专属于iOS的Sheets控件。
使用场景
用于呈现一组与当前操作相关的选项，如启动某个任务，或者确认是否开始执行某个可能具有破坏性的操作。
注意事项
在Android中不建议使用Action sheet,建议使用原生的Bottom sheet或Simple dialog。
样式类型
如下所示，支持单个或多个操作的展示，以及说明文案的展示：
显示与消失
显示
浮窗显示时从底部向上滑入，会显示深色遮罩以打断用户操作。
消失
浮窗消失时会向底部滑出。会在以下情况下会消失：1.用户触发浮窗上的对应操作（自定义）；2.用户点击浮窗外的区域；3.用户点击浮窗“取消”按钮。
显示位置
竖屏时显示在页面底部，横屏是居中显示在页面底部。
范例
微信的选择朋友圈发布类型及清除聊天记录的二次确认都使用的是Action sheet。
Activity views 活动浮窗
专属于iOS的Sheets控件。
使用场景
用于呈现一组与当前操作相关的选项表，如复制、收藏或分享。
注意事项
在Android中不建议使用Activity views,建议使用原生的Bottom sheet。
样式类型
1.列表样式
2.宫格样式
3.混合样式
显示与消失
显示
浮窗显示时从底部向上滑入，会显示深色遮罩以打断用户操作。
消失
浮窗消失时会向底部滑出。会在以下情况下会消失：1.用户触发浮窗上的对应操作（自定义）；2.用户点击浮窗外的区域；3.用户下拉浮窗达到收起阈值后（自定义）。
显示位置
竖屏时显示在页面底部，横屏是居中显示在页面底部。
支持高度延伸
当面板底部仍有未显示的内容时，可设置通过滑动或拖动面板来使其高度进行延伸，从而展示更多信息。
范例
爱奇艺的分享功能和泡泡圈选择发布内容类型，都使用的是Activity view。
用法总结
建议针对非系统级或业务级的重要提示，使用Sheets控件进行提示；Dialogs控件仅用于最重要的信息提示才算是“好钢用在了刀刃上”。
另外在调用原生Sheets组件时，记得分端的差异性哦～
网友评论