Jetpack Compose：AnimatedVisibility与animateItemPlacement联用问题咨询

环境说明 #

使用 androidx.compose:compose-bom:2024.06.00

问题回顾 #

问题1：横屏模式下列表无法滚动、内容截断 #

原实现通过AnimatedVisibility配合LaunchedEffect延迟显示实现交错入场，但导致横屏时滚动失效，列表内容被截断。

问题2：animateItemPlacement()与AnimatedVisibility冲突 #

添加Modifier.animateItemPlacement()实现排序变化动画时完全无效，移除AnimatedVisibility后该功能恢复正常。

原问题代码：

@Composable
fun SampleList(samples: List<Sample>) {
    val state = rememberLazyListState()
    LazyColumn(
        Modifier.padding(16.dp),
        state = state,
    ) {
        item {
            SampleHeader()
        }
        itemsIndexed(samples, key = { _, item -> item.name }) { index, item ->
            var visible by remember { mutableStateOf(false) }

            LaunchedEffect(key1 = index) {
                delay(index * 100L) // 交错延迟
                visible = true
            }

            AnimatedVisibility(
                visible = visible,
                enter = slideInHorizontally(
                    initialOffsetX = { fullWidth -> if (index % 2 == 0) -fullWidth else fullWidth },
                    animationSpec = tween(durationMillis = 300)
                ),
            ) {
                SampleItem(item, Modifier /* .animateItemPlacement() */)
            }
        }
    }
}

排序动画正常的基础代码（无入场动画）：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SampleList(samples: List<Sample>) {
    LazyColumn(
        Modifier.padding(16.dp),
        state = rememberLazyListState(),
    ) {
        item {
            SampleHeader()
        }
        items(samples, key = { it.name }) {
            SampleItem(it, Modifier.animateItemPlacement())
        }
    }
}

核心原因 #

1. 横屏滚动失效：AnimatedVisibility初始状态为false时，会将子组件尺寸设为0，导致LazyColumn无法正确计算列表总高度，横屏时容器尺寸异常问题被放大。
2. 动画逻辑互斥：AnimatedVisibility会接管子组件的可见性与布局流程，而animateItemPlacement()依赖LazyColumn自身的项布局更新机制，两者的动画逻辑相互覆盖，导致排序动画失效。

修复方案 #

改用animateEnterExit修饰符替代AnimatedVisibility，同时兼容交错入场动画与排序动画：

@OptIn(ExperimentalFoundationApi::class, ExperimentalAnimationApi::class)
@Composable
fun SampleList(samples: List<Sample>) {
    val state = rememberLazyListState()
    LazyColumn(
        Modifier.padding(16.dp),
        state = state,
    ) {
        item {
            SampleHeader()
        }
        itemsIndexed(samples, key = { _, item -> item.name }) { index, item ->
            val enterAnimation = remember(index) {
                slideInHorizontally(
                    initialOffsetX = { fullWidth -> if (index % 2 == 0) -fullWidth else fullWidth },
                    animationSpec = tween(durationMillis = 300, delayMillis = index * 100)
                ) + fadeIn(animationSpec = tween(300, delayMillis = index * 100))
            }

            SampleItem(
                item,
                Modifier
                    .animateItemPlacement()
                    .animateEnterExit(enter = enterAnimation)
            )
        }
    }
}

修复说明 #

• 解决横屏滚动问题：animateEnterExit不会修改组件可见性状态，仅在组件首次入场时播放动画，LazyColumn可正常计算每一项尺寸，避免容器尺寸异常。
• 兼容排序动画：animateItemPlacement()与animateEnterExit的动画逻辑互不干扰，前者处理项位置变化动画，后者处理首次入场交错效果，两者可同时生效。
• 简化实现：无需手动管理visible状态和LaunchedEffect延迟，直接通过动画的delayMillis实现交错效果，代码更简洁。

额外优化建议 #

• 若需限制动画仅在列表首次加载时播放，可结合LazyListState的firstVisibleItemIndex或rememberUpdatedState判断入场时机。
• 可根据需求调整动画时长与延迟参数，避免过长延迟带来的用户等待感。

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