滑动以关闭

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

滑动以关闭的动画细节与 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 与导航库结合使用的更多信息，请参阅 Wear Compose 导航库 的参考文档。

设计

在设计滑动以关闭操作时，请牢记以下两个原则

屏幕边缘

考虑其他可滑动的 UI 元素，例如分页应用视图。当可以滑动以关闭时，保留屏幕边缘的 20% 以触发该动作。

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

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

如果用户已将手指拖过屏幕宽度的 50% 以上，则应用应触发其余的向后滑动动画。如果小于此值，则应用应弹回完整应用视图。

如果手势很快，请忽略 50% 的阈值规则并向后滑动。