如何重写Compose中AlertDialog的默认动画？

默认的AlertDialog组件把动画逻辑封装在了内部，确实没法直接通过modifier添加animateEnterExit()。要替换成弹出（缩放+淡入）的进出动画，你可以直接基于基础的Dialog组件自定义实现，完全掌控动画效果。

方案1：用AnimatedVisibility快速实现 #

这种方式最简洁，利用Compose自带的AnimatedVisibility结合缩放、透明度动画来模拟弹出效果：

@Composable
fun CustomPopupDialog(
    showDialog: Boolean,
    onDismissRequest: () -> Unit,
    content: @Composable () -> Unit
) {
    if (showDialog) {
        Dialog(
            onDismissRequest = onDismissRequest,
            properties = DialogProperties(usePlatformDefaultWidth = false)
        ) {
            AnimatedVisibility(
                visible = showDialog,
                enter = scaleIn(
                    initialScale = 0.8f,
                    animationSpec = spring(stiffness = Spring.StiffnessMedium)
                ) + fadeIn(animationSpec = spring(stiffness = Spring.StiffnessMedium)),
                exit = scaleOut(
                    targetScale = 0.8f,
                    animationSpec = spring(stiffness = Spring.StiffnessMedium)
                ) + fadeOut(animationSpec = spring(stiffness = Spring.StiffnessMedium))
            ) {
                // 用Card模拟默认AlertDialog样式，也可以自定义布局
                Card(
                    modifier = Modifier
                        .fillMaxWidth(0.9f)
                        .wrapContentHeight(),
                    shape = MaterialTheme.shapes.medium,
                    elevation = 8.dp
                ) {
                    content()
                }
            }
        }
    }
}

使用方式和普通AlertDialog一致：

var showCustomDialog by remember { mutableStateOf(false) }

Button(onClick = { showCustomDialog = true }) {
    Text("弹出自定义动画Dialog")
}

CustomPopupDialog(
    showDialog = showCustomDialog,
    onDismissRequest = { showCustomDialog = false }
) {
    Column(modifier = Modifier.padding(24.dp)) {
        Text("自定义弹出动画", style = MaterialTheme.typography.headlineSmall)
        Spacer(modifier = Modifier.height(16.dp))
        Text("这是替换默认淡入淡出后的弹出效果")
        Spacer(modifier = Modifier.height(24.dp))
        Button(
            onClick = { showCustomDialog = false },
            modifier = Modifier.align(Alignment.End)
        ) {
            Text("关闭")
        }
    }
}

方案2：用Animatable手动控制动画（更灵活） #

如果需要更精细的动画控制，比如调整动画时长、添加弹跳效果，可以用Animatable手动管理缩放和透明度：

@Composable
fun CustomAnimatedDialog(
    showDialog: Boolean,
    onDismissRequest: () -> Unit,
    content: @Composable () -> Unit
) {
    val scale = remember { Animatable(0.8f) }
    val alpha = remember { Animatable(0f) }

    LaunchedEffect(showDialog) {
        if (showDialog) {
            // 进入动画：同时缩放+淡入
            launch { scale.animateTo(1f, spring(stiffness = Spring.StiffnessMediumLow)) }
            launch { alpha.animateTo(1f, spring(stiffness = Spring.StiffnessMediumLow)) }
        } else {
            // 退出动画：先缩放缩小，再关闭Dialog
            launch { scale.animateTo(0.8f, spring(stiffness = Spring.StiffnessMediumLow)) }
            launch { alpha.animateTo(0f, spring(stiffness = Spring.StiffnessMediumLow)) }
            // 等待动画结束后触发关闭
            awaitAll(scale.animateTo(0.8f), alpha.animateTo(0f))
            onDismissRequest()
        }
    }

    if (showDialog) {
        Dialog(
            onDismissRequest = {
                // 触发退出动画，而非直接关闭
                scale.animateTo(0.8f)
                alpha.animateTo(0f)
            },
            properties = DialogProperties(usePlatformDefaultWidth = false)
        ) {
            Box(
                modifier = Modifier
                    .graphicsLayer(
                        scaleX = scale.value,
                        scaleY = scale.value,
                        alpha = alpha.value
                    )
            ) {
                Card(
                    modifier = Modifier
                        .fillMaxWidth(0.9f)
                        .wrapContentHeight(),
                    shape = MaterialTheme.shapes.medium,
                    elevation = 8.dp
                ) {
                    content()
                }
            }
        }
    }
}

关键说明 #

• 为什么不用默认AlertDialog？因为它的内部动画是通过私有AlertDialogTransition实现的，没有暴露外部修改入口，所以只能自定义Dialog容器。
• DialogProperties(usePlatformDefaultWidth = false)是为了让我们自由控制Dialog宽度，避免默认平台宽度限制布局。
• 动画参数可按需调整：比如把spring换成tween设置固定时长，或修改初始缩放比例让弹出效果更夸张。

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