我想创建一个对话框模式,其中关闭按钮位于实际对话框之外,如下所示:
这是否违反了 Material Design 标准——是否意味着我有理由修改对话框的 UI 设计?如果没有,有没有直接的方法来实现这个?
您可以将
AlertDialog
variant 与 content
参数一起使用,并使用带有 Column
背景的 Transparent
,您可以在其中添加 Button
和 AlertDialog 内容。
类似:
val openDialog = remember { mutableStateOf(true) }
if (openDialog.value) {
AlertDialog(
onDismissRequest = {
openDialog.value = false
}
) {
Column(modifier = Modifier.background(Transparent)) {
Button(
modifier = Modifier.align(Alignment.End).padding(bottom = 10.dp),
onClick = {openDialog.value = false},
) {
Text("Close")
}
Surface(
modifier = Modifier
.wrapContentWidth()
.wrapContentHeight(),
shape = MaterialTheme.shapes.large
) {
//AlertDialog content
}
}
}
}
Box(modifier = Modifier, contentAlignment = Alignment.CenterStart) {
ModalBottomSheet(modifier = Modifier.drawBehind { },
onDismissRequest = { showDealBottomSheet.value = false },
sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false,
confirmValueChange = { it != SheetValue.Hidden }),
containerColor = Color.Transparent,
dragHandle = {
Column(
modifier = Modifier
.fillMaxWidth()
.height(70.dp)
.background(Color.Transparent)
.zIndex(2F),
Arrangement.Center,
Alignment.CenterHorizontally
) {
IconButton(
onClick = { /*TODO*/ },
modifier = Modifier
.offset(y = -5.dp, x = (0).dp)
.clip(shape = RoundedCornerShape(24.dp))
.background(Pink)
) {
Icon(Icons.Filled.Close, contentDescription = "", tint = Color.White)
}
}
}
},
tonalElevation = 0.dp,
content = {
Column(
modifier = Modifier
.fillMaxWidth()
.background(Color.White)
.padding(top = 12.dp)
.height(600.dp)
) {
}
})
}