Jetpack Compose AlertDialog设置内容尺寸后被裁剪如何解决？

问题原因 #

Compose 自带AlertDialog的text参数对应的父容器存在默认内置约束和内边距，会覆盖你给内部Column设置的尺寸属性，同时你给AlertDialog设置的总高度350dp还要预留确认按钮的占位高度，分配给text区域的高度远小于你设置的300dp，最终导致内容被裁剪。

解决方案 #

这里提供两种可直接落地的修改方式：

方案1：使用requiredSize强行指定内容尺寸，同时调整Dialog总高度 #

将Column的Modifier.size(300.dp)替换为Modifier.requiredSize(300.dp)，同时把AlertDialog的总高度调大到450dp以上，预留按钮和内边距的空间，修改后的核心代码如下：

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun ExceptionDialog(visible: MutableState<Boolean>, exception: Exception) {
    if (visible.value) {
        val context = LocalContext.current
        val contents = listOf("눈덩이", "돌덩이", "나뭇가지", "새똥", "나뭇잎", "흙더미")
        val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.something_error))

        AlertDialog(
            // 总高度调大，预留按钮和默认内边距的空间
            modifier = Modifier.size(350.dp, 450.dp),
            onDismissRequest = { visible.value = false },
            properties = DialogProperties(usePlatformDefaultWidth = false),
            confirmButton = {
                exception.message?.let { exceptionMessage ->
                    OutlinedButton(onClick = { Util.copy(context, exceptionMessage) }) {
                        Text(text = "에러 복사")
                    }
                }
            },
            text = {
                Column(
                    // 用requiredSize突破父级默认约束
                    modifier = Modifier.requiredSize(300.dp),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    LottieAnimation(
                        modifier = Modifier.size(200.dp),
                        iterations = LottieConstants.IterateForever,
                        composition = composition,
                    )
                    Text(
                        text = "깃메봇이가 예상치 못한 ${contents.random()}에 맞았어요 🥲\n${exception.message}",
                        textAlign = TextAlign.Center,
                        color = Color.Black
                    )
                }
            },
            shape = RoundedCornerShape(30.dp)
        )
    }
}

方案2：放弃默认槽位，完全自定义Dialog内容 #

如果需要更灵活的布局控制，直接把所有内容都放到AlertDialog的text参数里，不使用自带的confirmButton槽位，避免默认布局的约束干扰：

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun ExceptionDialog(visible: MutableState<Boolean>, exception: Exception) {
    if (visible.value) {
        val context = LocalContext.current
        val contents = listOf("눈덩이", "돌덩이", "나뭇가지", "새똥", "나뭇잎", "흙더미")
        val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.something_error))

        AlertDialog(
            modifier = Modifier.wrapContentSize(),
            onDismissRequest = { visible.value = false },
            properties = DialogProperties(usePlatformDefaultWidth = false),
            // 按钮和内容都放到text里，自己控制布局
            text = {
                Column(
                    modifier = Modifier.size(300.dp),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    LottieAnimation(
                        modifier = Modifier.size(200.dp),
                        iterations = LottieConstants.IterateForever,
                        composition = composition,
                    )
                    Text(
                        text = "깃메봇이가 예상치 못한 ${contents.random()}에 맞았어요 🥲\n${exception.message}",
                        textAlign = TextAlign.Center,
                        color = Color.Black,
                        modifier = Modifier.padding(vertical = 8.dp)
                    )
                    // 按钮移到内容区域内部
                    exception.message?.let { exceptionMessage ->
                        OutlinedButton(onClick = { Util.copy(context, exceptionMessage) }) {
                            Text(text = "에러 복사")
                        }
                    }
                }
            },
            // confirmButton槽位留空
            confirmButton = {},
            shape = RoundedCornerShape(30.dp)
        )
    }
}

两种方案都可以解决内容裁剪问题，方案1改动最小适合快速修复，方案2布局自由度更高适合后续自定义样式调整。原有问题的错误效果如下：

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