如何让Jetpack Compose中Modifier.animateContentSize()实现向上展开动画？

你的问题核心是默认Column高度扩展时以顶部为锚点向下延伸，要实现向上展开，只需要调整布局的锚点位置或者动态修改偏移量，以下是两种可行方案：

方案一：利用布局对齐控制扩展方向 #

通过外层Box包裹Column，并设置Column对齐到Box底部，这样高度增加时会从底部向上扩展：

@Composable
fun ExpandingColumn() {
    var expanded by remember { mutableStateOf(false) }
    Box(modifier = Modifier.fillMaxSize()) {
        // 固定位置的外层Box，作为Column的容器
        Box(
            modifier = Modifier
                .offset(x = 70.dp, y = 250.dp)
                .width(200.dp)
        ) {
            Column(
                modifier = Modifier
                    .align(Alignment.Bottom) // 关键：让Column以容器底部为锚点
                    .animateContentSize()
                    .background(Color.DarkGray)
                    .width(200.dp)
                    .height(if (expanded) 200.dp else 0.dp)
            ) {
                // 这里可以添加Column的内容
            }
        }

        Button(
            onClick = { expanded = !expanded },
            modifier = Modifier.offset(x = 150.dp, y = 600.dp)
        ) {
            Text(text = "Click")
        }
    }
}

方案二：动态调整偏移量实现向上展开 #

通过动画化Column的Y轴偏移量，让展开时Column整体向上移动，同时高度增加，视觉上形成向上展开的效果：

@Composable
fun ExpandingColumn() {
    var expanded by remember { mutableStateOf(false) }
    // 动画控制偏移量：展开时Y轴向上移动200.dp（和Column高度一致）
    val offsetY by animateDpAsState(
        targetValue = if (expanded) 250.dp - 200.dp else 250.dp,
        animationSpec = tween(durationMillis = 300)
    )

    Box(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .offset(x = 70.dp, y = offsetY)
                .animateContentSize()
                .background(Color.DarkGray)
                .width(200.dp)
                .height(if (expanded) 200.dp else 0.dp)
        ) {
            // 内容区域
        }

        Button(
            onClick = { expanded = !expanded },
            modifier = Modifier.offset(x = 150.dp, y = 600.dp)
        ) {
            Text(text = "Click")
        }
    }
}

说明 #

• 方案一更简洁，利用Compose的布局对齐特性，无需额外处理偏移动画
• 方案二更灵活，适合需要精确控制元素位置的场景

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