Jetpack Compose：AnimatedVisibility无法实现平滑容器动画的方案咨询

关于“修改宽度”方案的合理性 #

完全可以使用，这根本不是“取巧”——Compose 是状态驱动 UI，通过状态控制组件尺寸的动画是符合 Compose 设计理念的常规做法。只要代码逻辑清晰、动画效果符合预期，就没有任何问题，甚至在很多场景下，这种方式比 AnimatedVisibility 更灵活，能精确控制动画曲线、时长以及两个组件的动画同步性。

AnimatedVisibility 方案的问题解决 #

你遇到的第二个按钮跳变问题，本质是 AnimatedVisibility 默认会将组件从组合树中移除，导致父布局（Row）瞬间重新分配空间，而这个布局变化没有动画。要修复这个问题，需要让父布局的尺寸变化也参与动画，同时协调两个组件的动画节奏：

正确实现代码示例 #

var clickCount by remember { mutableStateOf(0) }
val isButton1Visible by remember { derivedStateOf { clickCount < 3 } }

Row(
    modifier = Modifier
        .fillMaxWidth()
        .animateContentSize(animationSpec = tween(500)), // 让Row的尺寸变化带动画
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
    AnimatedVisibility(
        visible = isButton1Visible,
        exit = shrinkHorizontally(animationSpec = tween(500)), // 按钮1收缩消失
        enter = expandHorizontally(animationSpec = tween(500))
    ) {
        Button(
            onClick = { clickCount++ },
            modifier = Modifier.wrapContentWidth()
        ) {
            Text("按钮1")
        }
    }

    Button(
        onClick = { clickCount = 0 },
        modifier = Modifier
            .weight(1f, fill = true) // 让按钮2占满剩余空间
            .animateContentSize(animationSpec = tween(500)) // 按钮自身尺寸变化动画
    ) {
        Text("按钮2")
    }
}

关键细节：

• 给父 Row 添加 Modifier.animateContentSize()，确保按钮1消失时，Row 的布局调整是平滑动画。
• 按钮2使用 Modifier.weight(1f)，当按钮1的空间被释放时，按钮2会自动填充，配合 Row 的动画实现平滑扩展。
• 同步两个动画的 animationSpec（比如统一用 tween(500)），让收缩和扩展的节奏一致，避免视觉不协调。

更专业的实现方式：使用 Transition 协调动画 #

如果需要更精细的动画控制（比如自定义动画曲线、同步多个状态变化），可以使用 Compose 的 Transition API，将两个按钮的动画绑定到同一个状态，确保完全同步：

var clickCount by remember { mutableStateOf(0) }
val transition = updateTransition(targetState = clickCount >= 3, label = "buttonTransition")

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
    val button1Width by transition.animateDp(
        transitionSpec = { tween(500) },
        label = "button1Width"
    ) { isExpanded ->
        if (isExpanded) 0.dp else Dimension.WrapContent.dp
    }

    val button2Weight by transition.animateFloat(
        transitionSpec = { tween(500) },
        label = "button2Weight"
    ) { isExpanded ->
        if (isExpanded) 1f else 0f
    }

    Button(
        onClick = { clickCount++ },
        modifier = Modifier.width(button1Width)
    ) {
        Text("按钮1")
    }

    Button(
        onClick = { clickCount = 0 },
        modifier = Modifier
            .weight(button2Weight, fill = true)
    ) {
        Text("按钮2")
    }
}

这种方式的优势：

• 完全控制两个组件的动画参数，确保收缩和扩展完全同步。
• 可根据状态自定义动画中间值，实现更复杂的动画效果。
• 避免了 AnimatedVisibility 移除组件带来的布局瞬间变化问题，组件始终存在，只是尺寸在动画中变化。

总结 #

• 修改宽度的方案 完全可行且合理，不要被“取巧”的想法限制，这是 Compose 状态驱动 UI 的典型应用。
• AnimatedVisibility 方案需要配合父布局的 animateContentSize() 实现平滑布局过渡，否则会出现跳变。
• 使用 Transition API 能获得最高的动画控制精度，适合复杂动画场景。

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