滑动即可关闭

滑动关闭动画用于表现在用户转到上一页时的过渡。

滑动关闭的动画详情与 RSB 按下类似。手指最多可控制 50% 的动画进度。

应用视图上还有一个与关闭手势关联的动画。应用视图上显示的移动量与手指需要移动的距离并不完全相同。应用视图绝不应离开屏幕边缘,显示带有一些阻力的类似挤压的效果。

实施步骤

Wear 有自己的 Box 版本,即 SwipeToDismissBox。这增加了对滑动关闭手势(与移动设备上的返回按钮类似)的支持。

SwipeToDismissBox 是一个可以通过向右滑动来关闭的可组合项。

如需使用 SwipeToDismissBox,您必须先创建一个状态。该状态包含滑动方向、动画是否正在运行、当前值和目标等信息。以下示例展示了如何设计一个简单的滑动关闭操作:

val state = rememberSwipeToDismissBoxState()
SwipeToDismissBox(
    onDismissed = { /* navigateBack */ },
) { isBackground ->
    if (isBackground) {
        Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.secondaryVariant))
    } else {
        Column(
            modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.primary),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            Text("Swipe to dismiss", color = MaterialTheme.colors.onPrimary)
        }
    }
}

如需详细了解如何将 SwipeToDismissBox 与 Navigation 库结合使用,请参阅 Wear Compose Navigation 库的参考文档。

设计

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

屏幕边缘

应考虑到可滑动的其他界面元素,例如分页的应用视图。如果可以滑动关闭,请预留 20% 的屏幕边缘,用于触发该动作。

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

决定是返回还是留在应用视图的阈值

如果用户手指拖动超过屏幕宽度的 50%,应用应触发剩余的滑动返回动画。如果不到此阈值,应用应迅速恢复完整的应用视图。

如果手势速度很快,请忽略 50% 阈值规则并滑动返回。