如何在Jetpack Compose的HorizontalPager中添加移除项动画

要实现类似LazyColumn/RecyclerView的项删除动画，你需要结合稳定项标识和animateItemPlacement修饰符，同时处理Pager状态的适配，具体步骤如下：

1. 确保数据项有唯一标识 #

首先，你的BannerUIModel需要提供一个唯一标识，让Compose能准确跟踪每个项的位置变化，而非依赖索引。比如给模型添加唯一ID字段：

data class BannerUIModel(
    val id: String, // 全局唯一标识
    // 其他业务字段...
)

2. 修改HorizontalPager实现 #

在HorizontalPager中为每个页面绑定唯一key，给卡片项添加位移动画修饰符，同时处理删除后的Pager状态避免越界：

@Composable
fun HomePageBanner(
    bannerList: List<BannerUIModel>,
    modifier: Modifier = Modifier,
    onButtonClicked: (index: Int) -> Unit = {},
    onItemRemoved: (index: Int) -> Unit = {},
) {
    val pageCount = bannerList.size
    val pagerState = rememberPagerState(pageCount = { pageCount })
    
    // 列表更新时调整Pager状态，避免索引越界
    LaunchedEffect(bannerList) {
        if (pagerState.currentPage >= pageCount && pageCount > 0) {
            pagerState.animateScrollToPage(pageCount - 1)
        }
    }

    HorizontalPager(
        state = pagerState,
        modifier = modifier,
        contentPadding = PaddingValues(start = 16.dp, end = 12.dp),
        pageSpacing = 0.dp,
    ) { index ->
        val banner = bannerList[index]
        // 用项的唯一ID作为key，让Compose识别项的身份
        BannerCardItem(
            bannerItem = banner,
            modifier = Modifier
                .fillMaxWidth()
                .padding(12.dp)
                // 添加位移动画，实现类似LazyColumn的项移动效果
                .animateItemPlacement(),
            onButtonClicked = { onButtonClicked(index) },
            onItemRemoved = {
                onItemRemoved(index)
            },
        )
    }
}

3. 关键原理说明 #

• 唯一key的作用：通过绑定项的唯一ID，Compose会将项的身份与索引解绑，删除操作后能精准识别哪些项需要移动，而非重新创建所有后续项。
• animateItemPlacement修饰符：自动处理项在布局中的位置变化动画，包括平滑位移和淡入淡出，效果与LazyColumn默认动画一致。
• Pager状态适配：当删除当前显示的页面（比如最后一页）时，自动滚动到新的有效页面，避免索引越界引发异常。

额外注意事项 #

• 确保列表更新基于不可变列表（比如用listOf或toList()生成），让Compose能正确触发重组。
• 若需要额外的删除动效（比如卡片缩放淡出），可在BannerCardItem内部结合AnimatedVisibility实现，与animateItemPlacement配合不会冲突。

内容的提问来源于stack exchange，提问作者Umut Tekin