迁移到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
相关产品推荐
相关产品推荐

