什麼是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 來展示關閉/收起操作。
7. 支持深層鏈接
模態浮窗中可以展示其它應用的深層鏈接內容或操作，譬如調用 Google 翻譯。
8. 範例
抖音的評論功能使用的是模態 Bottom sheet；百度地圖的路線切換功能使用的是非模態 Bottom sheet。
Side sheets 側邊浮窗
專屬於 Android 的 Sheets 控件。
1. 使用場景
用於補充內容相關的更多信息（非模態）或提供可交互的列表信息（模態）。
2. 注意事項
- Bottom sheet 通常用於 Android 豎屏場景，在 Android 橫屏場景建議使用 Side sheet。
- 在 iOS 中不建議使用 Bottom sheet，建議使用原生的 Action sheet 或 Activity views。
3. 樣式類型
菜單樣式：可嵌套 Menus，展示多個選項內容。
宮格樣式：可使用宮格佈局，展示多個選項內容。
4. 模態/非模態
如左下圖所示，非模態浮窗與內容保持在同一層級，用戶可同時對內容和浮窗進行操作（在移動端較少使用，通常用於 PC 端）。
如右下圖所示，模態浮窗層級高於內容，背景深色顯示遮罩，用戶僅能對浮窗進行操作。
5. 顯示與消失
顯示
浮窗顯示時從左/右邊緣滑入，非模態浮窗顯示時不會打斷用戶操作，模態浮窗顯示時會顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時會向左/右邊緣滑出。
模態浮窗在以下情況下會消失：
- 用戶觸發浮窗上的對應操作（自定義）；
- 用戶點擊浮窗外的區域；
- 用戶側拉浮窗達到收起閾值後（自定義）；
- 用戶點擊 Android 系統返回鍵。
非模態浮窗在以下情況下會消失：用戶選中浮窗上的對應按鈕（自定義）。
6. 滑動說明
支持上下滑動，不支持左右滑動。
7. 範例
淘寶的篩選功能使用的是 Side sheet。
Action sheets 操作浮窗
專屬於 iOS 的 Sheets 控件。
1. 使用場景
用於呈現一組與當前操作相關的選項，如啟動某個任務，或者確認是否開始執行某個可能具有破壞性的操作。
2. 注意事項
在 Android 中不建議使用 Action sheet，建議使用原生的 Bottom sheet 或 Simple dialog。
3. 樣式類型
如下所示，支持單個或多個操作的展示，以及說明文案的展示：
4. 顯示與消失
顯示
浮窗顯示時從底部向上滑入，會顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時會向底部滑出。會在以下情況消失：
- 用戶觸發浮窗上的對應操作（自定義）；
- 用戶點擊浮窗外的區域；
- 用戶點擊浮窗「取消」按鈕。
5. 顯示位置
豎屏時顯示在頁面底部，橫屏是居中顯示在頁面底部。
6. 範例
微信的選擇朋友圈發佈類型及清除聊天記錄的二次確認，都是使用的 Action sheet。
Activity views 活動浮窗
專屬於 iOS 的 Sheets 控件。
1. 使用場景
用於呈現一組與當前操作相關的選項表，如複製、收藏或分享。
2. 注意事項
在 Android 中不建議使用 Activity views，建議使用原生的 Bottom sheet。
3. 樣式類型
列表樣式
宮格樣式
混合樣式
4. 顯示與消失
顯示
浮窗顯示時從底部向上滑入，會顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時會向底部滑出。會在以下情況消失：
- 用戶觸發浮窗上的對應操作（自定義）；
- 用戶點擊浮窗外的區域；
- 用戶下拉浮窗達到收起閾值後（自定義）。
5. 顯示位置
豎屏時顯示在頁面底部，橫屏是居中顯示在頁面底部。
6. 支持高度延伸
當面板底部仍有未顯示的內容時，可設置通過滑動或拖動面板來使其高度進行延伸，從而展示更多信息。
7. 範例
愛奇藝的分享功能和泡泡圈選擇發佈內容類型，都使用的是 Activity view。
用法總結
建議針對非系統級或業務級的重要提示，使用 Sheets 控件進行提示；Dialogs 控件僅用於最重要的信息提示才算是「好鋼用在了刀刃上」。
另外在調用原生 Sheets 組件時，記得分端的差異性。
