Jetpack Compose：为嵌套LazyColumn的子项添加显示动画

核心解决方案 #

确保AnimatedVisibility始终在带有@Composable注解的函数内调用，同时为每个父答案维护独立的展开状态，将子答案的嵌套LazyColumn包裹在动画组件中即可解决编译问题。

完整实现示例 #

1. 定义数据结构

首先定义答案树的数据类，包含内容和子答案列表：

data class Answer(
    val id: Int,
    val content: String,
    val children: List<Answer> = emptyList()
)

2. 实现答案树布局

通过递归的AnswerItem组件实现嵌套结构，每个父项的展开状态用rememberSaveable保存（避免配置重置丢失状态）：

@Composable
fun AnswerTree(answers: List<Answer>) {
    LazyColumn {
        items(answers) { answer ->
            AnswerItem(answer)
        }
    }
}

@Composable
private fun AnswerItem(answer: Answer) {
    // 维护当前父答案的展开状态
    val isExpanded = rememberSaveable { mutableStateOf(false) }

    Column(modifier = Modifier.fillMaxWidth()) {
        // 父答案点击区域：切换展开状态
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .clickable { isExpanded.value = !isExpanded.value }
                .padding(horizontal = 16.dp, vertical = 12.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                text = answer.content,
                modifier = Modifier.weight(1f),
                fontSize = 16.sp
            )
            // 展开/收起图标
            Icon(
                imageVector = if (isExpanded.value) Icons.Filled.KeyboardArrowUp else Icons.Filled.KeyboardArrowDown,
                contentDescription = if (isExpanded.value) "收起子答案" else "展开子答案"
            )
        }

        // 子答案区域：用AnimatedVisibility包裹，实现显示/隐藏动画
        AnimatedVisibility(
            visible = isExpanded.value,
            enter = expandVertically(),
            exit = shrinkVertically()
        ) {
            LazyColumn(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 24.dp) // 缩进体现层级关系
            ) {
                items(answer.children) { childAnswer ->
                    AnswerItem(childAnswer) // 递归渲染子答案
                }
            }
        }
    }
}

常见错误原因分析 #

1. 非Composable环境调用AnimatedVisibility：如果将AnimatedVisibility放在普通函数、ViewModel或数据处理逻辑中，会因为缺少Composable上下文导致编译失败，必须确保它在带有@Composable注解的函数内使用。
2. 状态未正确托管：如果展开状态没有用MutableState或remember系列API包裹，Composable无法感知状态变化，动画也不会触发。
3. 嵌套结构错误：子LazyColumn必须作为AnimatedVisibility的直接子项，不能脱离Composable布局层级。

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