Jetpack Compose中LazyColumn删除条目的视图动画实现咨询

原有方案失效的核心原因 #

此前使用AnimatedVisibility实现删除动画出现异常，本质是逻辑链路的匹配问题：

• LazyColumn在接收到数据源变更、感知到某条数据被删除时，会直接从可组合渲染树中移除对应的item组件，不会为组件预留退出动画的完整执行周期
• 组件被快速回收的状态下，退出动画还未启动就已经被销毁，最终就会出现条目无过渡直接消失、其余列表项瞬间硬跳位的异常表现

落地实现的正确流程 #

• 给LazyColumn绑定稳定的列表状态：通过rememberLazyListState维护列表的滚动与位置状态，为后续的位置过渡动画提供状态基础
• 为每个列表项配置稳定的唯一key：在items方法的参数中传入key逻辑，确保LazyColumn能精准定位每一个条目的位置，避免动画执行时出现条目串位
• 依托LazyColumn内置的item能力实现过渡效果：使用LazyItemScope提供的animateItem修饰符，自定义退出动画的时长、插值参数，系统会自动处理“待删除条目先播放收缩、淡出的退出反馈，再触发布局重排”的逻辑，重排时其余条目会以平滑滑动的方式补位，最终形成匹配参考视觉的交互效果

核心实现代码参考 #

@Composable
fun DeletableItemList(
    itemList: List<DeletableItem>,
    onRequestDelete: (DeletableItem) -> Unit
) {
    val listState = rememberLazyListState()
    LazyColumn(state = listState) {
        items(
            items = itemList,
            key = { item -> item.uniqueId } // *必须传入和条目绑定的稳定唯一key*
        ) { currentItem ->
            DeletableRow(
                modifier = Modifier.animateItem(
                    fadeOutSpec = tween(300),
                    placementSpec = spring(stiffness = Spring.StiffnessMediumLow)
                ),
                item = currentItem,
                onDeleteClick = { onRequestDelete(currentItem) }
            )
        }
    }
}

高频踩坑提醒 #

• 不要依赖组件级的AnimatedVisibility实现删除动画：这类组件的显隐动画生命周期依附于组件本身的存在状态，当LazyColumn从列表中移除对应条目时，组件会被直接回收，退出动画没有足够的执行时间窗口，必然出现硬切的异常效果
• 不要省略item的唯一key配置：LazyColumn默认会按照列表位置索引匹配item，动画执行时会出现内容错配、位置错乱的问题，无法达到预期的删除反馈效果

内容的提问来源于stack exchange，提问作者Ajay Venugopal