Jetpack Compose中animateEnterExit修饰符部分生效问题求助

在Jetpack Compose中使用AnimatedVisibility结合animateEnterExit()修饰符时，遇到了一个奇怪的问题：同一个修饰符在某个Composable里能正常覆盖父组件的动画，在另一个Composable里却完全不生效。下面是两个对比示例：

1. animateEnterExit()正常生效的Composable #

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun CustomAnimatedVisibilityDemo(
    modifier: Modifier = Modifier
) {
    var visible by remember { mutableStateOf(true) }

    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        AnimatedVisibility(
            visible = visible,
            enter = fadeIn(animationSpec = tween(1000)) + slideInVertically(initialOffsetY = { -it }),
            exit = fadeOut(animationSpec = tween(1000)) + slideOutVertically(targetOffsetY = { it })
        ) {
            Column(
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                // 使用父组件默认动画的Box
                Box(
                    modifier = Modifier
                        .size(200.dp)
                        .clip(RoundedCornerShape(8.dp))
                        .background(Color.Green),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "Fade Box")
                }

                // 自定义动画的Box，animateEnterExit生效
                Box(
                    modifier = Modifier
                        .size(200.dp)
                        .clip(RoundedCornerShape(8.dp))
                        .background(Color.Blue)
                        .animateEnterExit(
                            enter = expandVertically(animationSpec = tween(1200)) + fadeIn(),
                            exit = shrinkVertically(animationSpec = tween(800)) + fadeOut()
                        ),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "Slide Box")
                }
            }
        }

        Button(onClick = { visible = !visible }) {
            Text(text = "Toggle")
        }
    }
}

2. animateEnterExit()未生效的Composable #

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimateAppAndDisApp(
    modifier: Modifier = Modifier
) {
    var visible by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = { visible = !visible }) {
            Text(if (visible) "Hide" else "Show")
        }

        Spacer(modifier = Modifier.height(20.dp))

        AnimatedVisibility(
            visible = visible,
            enter = fadeIn(animationSpec = tween(1000)) + slideInVertically(initialOffsetY = { -it }),
            exit = fadeOut(animationSpec = tween(1000)) + slideOutVertically(targetOffsetY = { it })
        ) {
            Column(
                modifier = Modifier.fillMaxWidth(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text("Default Animation 1")

                Spacer(modifier = Modifier.height(10.dp))

                // animateEnterExit未生效的BasicText
                BasicText(
                    "Custom Animation",
                    modifier = Modifier.animateEnterExit(
                        enter = expandVertically(animationSpec = tween(1200)) + fadeIn(),
                        exit = shrinkVertically(animationSpec = tween(800)) + fadeOut()
                    )
                )

                Spacer(modifier = Modifier.height(10.dp))

                Text("Default Animation 2")
            }
        }
    }
}

问题根源 #

animateEnterExit()修饰符需要作用在有明确布局尺寸的Composable上才能生效。

在第一个示例中，Box通过size(200.dp)明确指定了自身尺寸，动画系统可以基于这个边界计算expandVertically/shrinkVertically这类依赖尺寸的动画。而第二个示例中的BasicText默认是wrapContent，在动画初始阶段（比如进入动画开始时），文本还没有完成测量，没有明确的布局边界，导致animateEnterExit()无法正确计算动画参数，最终表现为修饰符失效，直接沿用了父AnimatedVisibility的动画。

解决方法 #

给使用animateEnterExit()的BasicText添加明确的尺寸约束，或者用有尺寸的容器（比如Box）包裹它：

方法1：给BasicText添加尺寸修饰符

BasicText(
    "Custom Animation",
    modifier = Modifier
        .fillMaxWidth() // 明确宽度，让动画有计算依据
        .animateEnterExit(
            enter = expandVertically(animationSpec = tween(1200)) + fadeIn(),
            exit = shrinkVertically(animationSpec = tween(800)) + fadeOut()
        ),
    textAlign = TextAlign.Center // 保持居中对齐
)

方法2：用Box包裹BasicText

Box(
    modifier = Modifier
        .animateEnterExit(
            enter = expandVertically(animationSpec = tween(1200)) + fadeIn(),
            exit = shrinkVertically(animationSpec = tween(800)) + fadeOut()
        ),
    contentAlignment = Alignment.Center
) {
    BasicText("Custom Animation")
}

这两种方式都能给动画提供明确的布局边界，让animateEnterExit()正确生效。

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