Jetpack Compose对话框内布局变更后高度未自动更新如何解决

问题原因 #

Jetpack Compose 低版本Material2组件库的AlertDialog默认首次布局时会固定对话框高度，后续内部内容更新时不会重新测量调整高度，因此会出现高度无法适配新内容的问题。

解决方案 #

方案1：添加修饰符快速修复

直接给AlertDialog传入modifier = Modifier.wrapContentHeight(unbounded = true)即可解决，修改后代码如下：

@Composable
fun AlertDialogTest() {
    var showDialog by remember { mutableStateOf(false)}
    var showExtra by remember { mutableStateOf(false)}
    Button(onClick = { showDialog = true }) {
        Text("Open dialog")
    }
    if (showDialog) {
        AlertDialog(
            // 新增此行即可实现高度自适应
            modifier = Modifier.wrapContentHeight(unbounded = true),
            text = {
                Column { 
                    Button(onClick = {showExtra = true}) {
                        Text ("Show rest of dialog")
                    }
                    if (showExtra) {
                        Text("More text", style = MaterialTheme.typography.h5)
                        Text("Even more text", style = MaterialTheme.typography.h5)
                    }
                }
            },
            confirmButton = { 
                TextButton(onClick = { showDialog = false }) {
                    Text("Close")
                }
            },
            onDismissRequest = {showDialog = false},
        )
    }
}

如果你的项目使用Material3组件库，该问题已经被官方修复，无需额外添加修饰符即可自动适配高度。

方案2：自定义Dialog（适合高度自定义场景）

如果需要更灵活的对话框样式，可直接使用底层Dialog组件实现，完全自主控制布局逻辑：

@Composable
fun CustomAlertDialogTest() {
    var showDialog by remember { mutableStateOf(false)}
    var showExtra by remember { mutableStateOf(false)}
    Button(onClick = { showDialog = true }) {
        Text("Open dialog")
    }
    if (showDialog) {
        Dialog(onDismissRequest = { showDialog = false }) {
            Surface(
                shape = MaterialTheme.shapes.medium,
                color = MaterialTheme.colors.surface,
                modifier = Modifier.padding(16.dp)
            ) {
                Column(modifier = Modifier.padding(24.dp)) {
                    Button(onClick = {showExtra = true}) {
                        Text ("Show rest of dialog")
                    }
                    if (showExtra) {
                        Text("More text", style = MaterialTheme.typography.h5)
                        Text("Even more text", style = MaterialTheme.typography.h5)
                    }
                    Row(modifier = Modifier.align(Alignment.End).padding(top = 24.dp)) {
                        TextButton(onClick = { showDialog = false }) {
                            Text("Close")
                        }
                    }
                }
            }
        }
    }
}

原问题运行效果：

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