Modifier.animateContentSize无法实现内容收缩动画问题求助

你遇到的问题是Modifier.animateContentSize()仅在内容展开时生效，收缩时直接跳回原始尺寸，核心原因是展开的内容被直接移除，Compose没有足够时间触发尺寸变化的过渡动画。

修复方案 #

把展开的内容用AnimatedVisibility包裹，让内容的显示/隐藏带有过渡效果，配合animateContentSize就能实现完整的展开/收缩动画：

@OptIn(ExperimentalMaterial3Api::class, ExperimentalAnimationApi::class)
@Composable
fun TheThing() {
    var expanded by remember { mutableStateOf(false) }

    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        Column {
            Card(
                onClick = { expanded = !expanded },
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
                    .animateContentSize()
            ) {
                Text("Clickable", style = MaterialTheme.typography.displayMedium)

                AnimatedVisibility(visible = expanded) {
                    Column {
                        Text("More text here... ")
                        Text("More text here... ")
                        Text("More text here... ")
                        Text("More text here... ")
                        Text("More text here... ")
                        Text("More text here... ")
                        Text("More text here... ")
                        Text("More text here... ")
                        Text("More text here... ")
                        Text("More text here... ")
                        Text("More text here... ")
                        Text("More text here... ")
                        Text("More text here... ")
                    }
                }
            }
        }
    }
}

原理说明 #

• AnimatedVisibility会给内容添加淡出/滑出的过渡动画，让内容不是瞬间消失，而是逐步隐藏
• 这种渐进式的内容变化能让animateContentSize准确捕捉到Card从大到小的尺寸变化过程，从而触发收缩动画

注意：需要添加ExperimentalAnimationApi注解，因为AnimatedVisibility目前属于实验性API。

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