滑动以关闭

滑动以关闭动画传达了用户导航至上一页时的过渡效果。

滑动以关闭的动画细节与按下旋转表冠 (RSB) 类似。您的手指控制动画进度直至 50%。

应用视图上还有一个与关闭手势关联的附加动画。应用视图上显示的移动距离与手指需要移动的距离并不完全相同。应用视图不应离开屏幕边缘,应呈现出一种带有一定阻力的挤压效果。

实现

SwipeDismissableNavHost(来自 navigation 库)默认提供滑动以关闭的导航手势。

如果您没有使用该导航库,仍然可以通过直接使用 BasicSwipeToDismissBox 来支持此全屏导航手势。

设计

设计“滑动以关闭”操作时,请牢记以下两条原则:

屏幕边缘

考虑其他可滑动的 UI 元素,例如分页应用视图。当“滑动以关闭”功能可用时,请保留屏幕边缘 20% 的区域来触发该动作。

如需查看当内容可水平滚动时如何实现边缘滑动的示例,请参阅此来自 Compose Material for Wear OS 代码库的示例

返回或保留在应用视图的阈值

如果用户手指拖动的距离超过了屏幕宽度的 50%,应用应触发剩余的滑回动画。如果距离小于此值,应用应吸附回完整的应用视图。

如果手势速度很快,则忽略 50% 的阈值规则,直接执行滑回操作。