You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

迁移到AnchoredDraggable后,如何实现Overscroll效果?

如何为AnchoredDraggable添加反向拖拽的Overscroll效果

AnchoredDraggable并未像旧版Swipeable那样默认内置overscroll效果,需要手动通过overscrollEffect参数配合相关API实现,具体步骤如下:

  • 关联Overscroll效果到拖拽状态
    使用rememberOverscrollEffect创建overscroll效果实例,并绑定到AnchoredDraggableState,让状态感知超出锚点范围的拖拽动作:

    // 自定义状态枚举
    enum class PanelState { Collapsed, Expanded }
    
    val overscrollEffect = rememberOverscrollEffect()
    val draggableState = rememberAnchoredDraggableState<PanelState>(
        initialValue = PanelState.Collapsed,
        positionalThreshold = { it * 0.5f },
        velocityThreshold = { 100.dp.toPx() },
        animationSpec = tween(),
        overscrollEffect = overscrollEffect // 绑定overscroll效果
    )
    
  • 配置锚点并应用视觉偏移
    先为两个状态设置对应锚点位置,再通过offset修饰符将包含overscroll的拖拽偏移量应用到布局,让视觉上体现弹性拖拽效果:

    // 示例:垂直方向面板拖拽
    val collapsedHeight = 60.dp
    val expandedHeight = 300.dp
    
    // 绑定锚点与状态
    LaunchedEffect(Unit) {
        draggableState.updateAnchors(
            anchors = mapOf(
                0f to PanelState.Collapsed,
                expandedHeight.toPx() - collapsedHeight.toPx() to PanelState.Expanded
            )
        )
    }
    
    Box(
        modifier = Modifier
            .height(if (draggableState.currentValue == PanelState.Expanded) expandedHeight else collapsedHeight)
            .anchoredDraggable(
                state = draggableState,
                orientation = Orientation.Vertical,
                overscrollEffect = overscrollEffect
            )
            .offset {
                // 应用包含overscroll的总偏移量
                IntOffset(0, draggableState.requireOffset().roundToInt())
            }
            .background(Color.Gray)
    ) {
        // 面板内容
        Text(
            text = if (draggableState.currentValue == PanelState.Expanded) "展开状态" else "收起状态",
            modifier = Modifier.align(Alignment.Center)
        )
    }
    
  • 自定义Overscroll效果(可选)
    若默认弹性效果不符合需求,可通过rememberOverscrollEffect参数调整阻尼、刚度等属性:

    val customOverscrollEffect = rememberOverscrollEffect(
        dampingRatio = 0.15f, // 阻尼系数越小,弹性衰减越慢
        stiffness = 150f // 刚度越小,弹性形变越明显
    )
    

如果是水平方向拖拽,只需将Orientation改为Horizontal,并在offset中调整x轴偏移量即可。

内容的提问来源于stack exchange,提问作者Berťák

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.19 06:03:16