Jetpack Compose中单个Swipeable能否同时支持左右双向滑动

完全可以在单个swipeable配置中同时支持左右双向滑动，核心是给anchors参数配置三个锚点对应三个滑动状态即可。

实现步骤 #

1. 定义滑动状态枚举 #

首先创建枚举类对应三种滑动状态：

enum class SwipeState {
    // 初始默认位置
    DEFAULT,
    // 向左滑动到终点
    LEFT_FINISH,
    // 向右滑动到终点
    RIGHT_FINISH
}

2. 初始化SwipeableState #

指定初始状态为默认状态即可：

val swipeState = rememberSwipeableState(initialValue = SwipeState.DEFAULT)

3. 配置三锚点的swipeable修饰符 #

提前通过onSizeChanged拿到Box的宽度sizePx后，直接在anchors中同时配置正负两个方向的偏移锚点：

Box(
    modifier = Modifier
        .fillMaxWidth()
        // 先获取组件自身宽度
        .onSizeChanged { sizePx = it.width.toFloat() }
        .swipeable(
            state = swipeState,
            // 三个锚点分别对应默认、左滑终点、右滑终点
            anchors = mapOf(
                0f to SwipeState.DEFAULT,
                -sizePx to SwipeState.LEFT_FINISH,
                sizePx to SwipeState.RIGHT_FINISH
            ),
            thresholds = { _, _ ->
                FractionalThreshold(0.3f)
            },
            orientation = Orientation.Horizontal
        )
) {
    // Box内部内容实现
}

业务逻辑处理 #

你可以通过监听swipeState.currentValue的变化，触发对应方向的业务逻辑：

LaunchedEffect(swipeState.currentValue) {
    when(swipeState.currentValue) {
        SwipeState.LEFT_FINISH -> {
            // 左滑触发逻辑，比如删除条目
            // 处理完后可手动复位到默认位置
            swipeState.animateTo(SwipeState.DEFAULT)
        }
        SwipeState.RIGHT_FINISH -> {
            // 右滑触发逻辑，比如置顶、收藏
            swipeState.animateTo(SwipeState.DEFAULT)
        }
        else -> {}
    }
}

注意事项 #

• 如果你使用的是Compose Material 1.4及以上版本，swipeable被标记为实验性API，未来可能会被新的拖动相关API替代，当前稳定版可正常使用
• 确保sizePx的数值和当前Box宽度一致，否则会出现锚点偏移、滑动手感异常的问题

内容的提问来源于stack exchange，提问作者Md Hanif