滑动即可关闭

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

滑动关闭的动画详情与 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% 的屏幕边缘，用于触发该动作。

请参阅适用于 Wear OS 的 Compose Material 代码库中的示例 ，了解有关内容可水平滚动时的边缘滑动的示例。

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

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

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