如何在Compose的Material3 AlertDialog中设置按钮全屏/多按钮均分宽度

要实现单按钮全屏宽度、多按钮均分布局的效果，你可以通过以下方式修改ShowAlertDialog的按钮区域代码：

修改后的完整Composable函数 #

@Composable
fun ShowAlertDialog(
    showIcon: Int? = null,
    header: String,
    description: String,
    btnActions: List<String>,
    onCloseAction: (String) -> Unit
){
    AlertDialog(
        onDismissRequest = {},
        containerColor = colorResource(id = R.color.white),
        icon = {
            showIcon?.let {
                Icon(
                    painter = painterResource(id = it),
                    contentDescription = "Alert Icon",
                    tint = Color.Unspecified,
                    modifier = Modifier
                        .width(72.dp)
                        .height(72.dp)
                )
            }
        },
        title = {
            Text(
                text = header,
                color = Color.Black,
                fontFamily = proximaNovaFont,
                fontWeight = FontWeight.Bold,
                fontSize = 17.sp
            )
        },
        text = {
            Text(
                text = description,
                lineHeight = 22.sp,
                color = colorResource(id = R.color.black_65),
                fontFamily = proximaNovaFont,
                fontSize = 16.sp
            )
        },
        confirmButton = {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 19.dp, vertical = 16.dp),
                horizontalArrangement = Arrangement.spacedBy(12.dp) // 按钮之间的间距
            ) {
                btnActions.forEach { btnTxt ->
                    Box(
                        modifier = Modifier
                            .weight(1f) // 关键：让按钮均分宽度，单按钮时自动占满
                            .background(
                                colorResource(id = R.color.brand_red),
                                RoundedCornerShape(5.dp)
                            )
                    ) {
                        TextButton(
                            onClick = { onCloseAction(btnTxt) },
                            modifier = Modifier.fillMaxWidth()
                        ) {
                            Text(
                                text = btnTxt,
                                color = colorResource(id = R.color.white),
                                style = interMediumTypography.bodySmall,
                                fontSize = 14.sp,
                                textAlign = TextAlign.Center
                            )
                        }
                    }
                }
            }
        }
    )
}

关键修改点说明 #

• 替换LazyRow为Row：按钮数量通常较少，使用普通Row更高效，也更易控制布局。
• 添加weight(1f)：给每个按钮的Modifier设置weight(1f)，当有多个按钮时会自动均分可用宽度；只有一个按钮时，会占满整个Row的宽度。
• 调整padding结构：将原来按钮内部的左右padding移到Row上，同时通过Arrangement.spacedBy设置按钮之间的水平间距，避免布局拥挤。
• TextButton设置fillMaxWidth：确保按钮的可点击区域充满整个Box宽度，提升交互体验。

测试示例 #

• 单按钮调用（全屏宽度）：

ShowAlertDialog(
    R.drawable.ic_equipment_mic_off,
    "Microphone not connected",
    "Please check that your phone's microphone is working and that Learn English can access it.",
    listOf("OK")
) { "Ok" }

• 双按钮调用（均分宽度）：

ShowAlertDialog(
    R.drawable.ic_equipment_mic_off,
    "Permission Required",
    "Do you allow Learn English to access your microphone?",
    listOf("Deny", "Allow")
) { btnText -> /* 处理点击逻辑 */ }

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