Material3 AlertDialog圆角处出现多余底色问题求助

问题描述 #

迁移至Material 3（版本1.0.0）使用androidx.compose.material3.AlertDialog时，对话框圆角下方出现多余底色，需去除以实现美观的圆角对话框。

问题代码 #

@Composable
fun NewClientSourceDialog(
    onDoNothingClick: () -> Unit,
    onImportClick: () -> Unit,
    onAddNewClick: () -> Unit,
) {
    AlertDialog(
        onDismissRequest = onDoNothingClick,
        text = {
            DialogText(id = R.string.clients_new_client_source)
        },
        confirmButton = {
            Column(
                modifier = Modifier
                    .padding(all = 8.dp)
                    .fillMaxWidth(),
                verticalArrangement = Arrangement.Bottom,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                DialogButton(
                    onClick = onImportClick,
                    captionId = R.string.clients_import_contacts,
                )
                DialogButton(
                    onClick = onAddNewClick,
                    captionId = R.string.clients_create_from_scratch,
                )
                DialogButton(
                    onClick = onDoNothingClick,
                    captionId = R.string.clients_new_client_dismiss
                )
            }
        },
    )
}


@Composable
fun DialogButton(
    onClick: () -> Unit,
    @StringRes captionId: Int,
    destructive: Boolean = false,
) = TextButton(onClick = onClick) {
    Text(
        text = stringResource(id = captionId),
    )
}

解决方案 #

该问题源于自定义纵向按钮布局超出了AlertDialog默认Surface的裁剪范围，导致底层底色透出，可通过以下两种方式解决：

方法1：给AlertDialog添加裁剪修饰符 #

利用Material 3默认的对话框形状，给AlertDialog的modifier添加clip修饰符，确保所有内容被圆角裁剪：

AlertDialog(
    modifier = Modifier.clip(MaterialTheme.shapes.extraLarge), // 添加裁剪修饰符
    onDismissRequest = onDoNothingClick,
    text = {
        DialogText(id = R.string.clients_new_client_source)
    },
    confirmButton = {
        // 原有代码不变
    },
)

方法2：统一按钮区域的背景与圆角 #

给按钮所在的Column设置与对话框一致的背景色和圆角，避免底色透出：

confirmButton = {
    Column(
        modifier = Modifier
            .padding(all = 8.dp)
            .fillMaxWidth()
            .background(
                color = MaterialTheme.colorScheme.surface,
                shape = MaterialTheme.shapes.extraLarge
            ), // 添加背景与圆角设置
        verticalArrangement = Arrangement.Bottom,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        // 原有按钮代码不变
    }
}

修改后完整代码（方法1示例） #

@Composable
fun NewClientSourceDialog(
    onDoNothingClick: () -> Unit,
    onImportClick: () -> Unit,
    onAddNewClick: () -> Unit,
) {
    AlertDialog(
        modifier = Modifier.clip(MaterialTheme.shapes.extraLarge),
        onDismissRequest = onDoNothingClick,
        text = {
            DialogText(id = R.string.clients_new_client_source)
        },
        confirmButton = {
            Column(
                modifier = Modifier
                    .padding(all = 8.dp)
                    .fillMaxWidth(),
                verticalArrangement = Arrangement.Bottom,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                DialogButton(
                    onClick = onImportClick,
                    captionId = R.string.clients_import_contacts,
                )
                DialogButton(
                    onClick = onAddNewClick,
                    captionId = R.string.clients_create_from_scratch,
                )
                DialogButton(
                    onClick = onDoNothingClick,
                    captionId = R.string.clients_new_client_dismiss
                )
            }
        },
    )
}


@Composable
fun DialogButton(
    onClick: () -> Unit,
    @StringRes captionId: Int,
    destructive: Boolean = false,
) = TextButton(onClick = onClick) {
    Text(
        text = stringResource(id = captionId),
    )
}

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