Jetpack Compose中Dialog组件叠加动画异常问题排查

我实现了一个带内容动画的Dialog，AnimatedScaleInTransition是基于AnimatedVisibility实现的内容缩放动画组件，以传入的content()作为动画载体。当前代码运行正常：Dialog会先显示淡灰色背景，再执行内容滑入动画。

现有代码如下：

Dialog(onDismissRequest = {
    coroutineScope.launch {
        startDismissWithExitAnimation(animateTrigger, onDismissRequest)
    }
}
) {
    Box(
        modifier = modifier
    ) {
        AnimatedScaleInTransition(time = 200, visible = animateTrigger.value) {
            content()
        }
    }
}

尝试在第一个Dialog上方叠加另一个带动画的Dialog时，新Dialog的背景会突兀弹出白色，而非正常的灰色淡入效果。自定义Dialog也存在该问题，且不受外部Composable影响，请问遗漏了什么？

核心原因是系统Dialog的背景动画为全局共享状态，叠加Dialog时会被首个Dialog的背景动画状态覆盖。Jetpack Compose默认Dialog的半透明蒙层动画由内部统一管理，当首个Dialog已完成背景动画处于显示状态时，第二个Dialog弹出时，系统判定背景已处于"显示"状态，不会触发淡入动画，直接显示未执行动画的白色背景（实际是第二个Dialog的背景未执行淡入流程）。

可通过以下两种方案解决：

1. 自定义Dialog背景蒙层，实现独立动画 #

放弃系统默认Dialog背景，自行实现带独立动画的蒙层，确保每个Dialog的背景动画互不干扰：

@Composable
fun CustomAnimatedDialog(
    onDismissRequest: () -> Unit,
    animateTrigger: MutableState<Boolean>,
    coroutineScope: CoroutineScope,
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    AnimatedVisibility(
        visible = animateTrigger.value,
        enter = fadeIn(animationSpec = tween(300)),
        exit = fadeOut(animationSpec = tween(300))
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Black.copy(alpha = 0.5f))
                .clickable {
                    coroutineScope.launch {
                        startDismissWithExitAnimation(animateTrigger, onDismissRequest)
                    }
                }
        ) {
            Box(modifier = modifier) {
                AnimatedScaleInTransition(time = 200, visible = animateTrigger.value) {
                    content()
                }
            }
        }
    }
}

2. 配置DialogProperties，替换系统背景动画 #

若不想完全自定义背景，可通过DialogProperties调整系统Dialog行为，给内容容器添加背景和独立淡入动画（部分Compose版本可能存在兼容性问题）：

Dialog(
    onDismissRequest = {
        coroutineScope.launch {
            startDismissWithExitAnimation(animateTrigger, onDismissRequest)
        }
    },
    properties = DialogProperties(
        dismissOnBackPress = true,
        dismissOnClickOutside = true
    )
) {
    Box(
        modifier = modifier
            .background(
                color = Color.Black.copy(alpha = 0.5f),
                shape = RoundedCornerShape(8.dp)
            )
            .animateEnterExit(
                enter = fadeIn(tween(300)),
                exit = fadeOut(tween(300))
            )
    ) {
        AnimatedScaleInTransition(time = 200, visible = animateTrigger.value) {
            content()
        }
    }
}

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