Jetpack Compose：AlertDialog内Button点击后宽度异常收缩问题求助

问题说明 #

使用Jetpack Compose的AlertDialog时，为按钮设置fillMaxWidth(fraction = ...)后，初始显示宽度正常，但点击按钮后会收缩为包裹内容的尺寸，多个Compose版本均存在该问题。

复现代码：

AlertDialog(
    modifier = modifier,
    onDismissRequest = {},
    text = { },
    buttons = {
        Button(
            onClick = { },
            modifier = Modifier
                .fillMaxWidth(0.75f)
                .padding(start = 12.dp, end = 12.dp, bottom = 8.dp)
        ) {
            Text(text = "Done")
        }
    }
)

点击前：

点击后：

解决方案 #

该问题源于AlertDialog的buttons区域在按钮点击后会重新计算布局约束，导致fillMaxWidth(fraction)的约束失效，可通过以下方式解决：

方案一：外层包裹Box稳定约束 #

在按钮外层添加Box并设置fillMaxWidth()，让按钮在Box内部使用fillMaxWidth(0.75f)，固定布局约束：

AlertDialog(
    modifier = modifier,
    onDismissRequest = {},
    text = { },
    buttons = {
        Box(modifier = Modifier.fillMaxWidth()) {
            Button(
                onClick = { },
                modifier = Modifier
                    .fillMaxWidth(0.75f)
                    .align(Alignment.Center)
                    .padding(start = 12.dp, end = 12.dp, bottom = 8.dp)
            ) {
                Text(text = "Done")
            }
        }
    }
)

方案二：用padding替代fraction控制宽度 #

放弃fillMaxWidth(fraction)，改用fillMaxWidth()配合水平padding实现相同宽度占比，避免约束重置问题：

AlertDialog(
    modifier = modifier,
    onDismissRequest = {},
    text = { },
    buttons = {
        val screenWidth = LocalConfiguration.current.screenWidthDp.dp
        Button(
            onClick = { },
            modifier = Modifier
                .fillMaxWidth()
                .padding(start = screenWidth * 0.125f, end = screenWidth * 0.125f, bottom = 8.dp)
        ) {
            Text(text = "Done")
        }
    }
)

注：通过屏幕宽度的12.5%左右padding，实现按钮占总宽度75%的效果，也可根据需求调整padding比例。

方案三：自定义Dialog布局 #

如果系统AlertDialog的布局约束限制过多，可直接使用Dialog组件完全自定义对话框结构：

Dialog(onDismissRequest = {}) {
    Surface(
        shape = MaterialTheme.shapes.medium,
        color = MaterialTheme.colorScheme.surface
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // 自定义内容区域
            Spacer(modifier = Modifier.height(8.dp))
            Button(
                onClick = {},
                modifier = Modifier.fillMaxWidth(0.75f)
            ) {
                Text(text = "Done")
            }
        }
    }
}

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