如何在 Flutter 中重置滑动检测以停止小组件动画？

Android

2024-03-23 12:26:11

在 Flutter 中重置滑动检测以停止小组件动画

问题：

在 Flutter 中使用 detectHorizontalDragGestures 修饰符时，当用户手指离开屏幕时，小组件会自动滑动回其原始位置。但是在某些情况下，你可能希望在用户手指滑出小组件时停止动画。

解决方法：

1. 监听 `dismissLeft` 和 `dismissRight` 状态

detectHorizontalDragGestures 修饰符会触发 dismissLeft 和 dismissRight 状态，表示小组件已达到滑动阈值。监听这些状态的变化，并在触发时重置滑动检测。

2. 重置 `offset` 状态

offset 状态跟踪小组件的当前水平偏移量。要重置动画，在 dismissLeft 或 dismissRight 触发时将 offset 状态重置为 0。

代码示例

将以下代码添加到你的 Card 小组件中：

LaunchedEffect(dismissLeft) {
    offset = 0f
}

LaunchedEffect(dismissRight) {
    offset = 0f
}

完整代码

Card(
    modifier = Modifier
        .offset { IntOffset(offset.roundToInt(), 0) }
        .pointerInput(Unit) {
            detectHorizontalDragGestures(
                onDragEnd = { offset = 0f },
                onHorizontalDrag = { change, dragAmount ->
                    offset += (dragAmount / density) * sensitivityFactor
                    when {
                        offset > swipeThreshold -> dismissRight = true
                        offset < -swipeThreshold -> dismissLeft = true
                    }
                    if (change.positionChange() != Offset.Zero) change.consume()
                }
            )
        }
) {}