Jetpack Compose：对话框模式之外的关闭按钮

Question

我想创建一个对话框模式，其中关闭按钮位于实际对话框之外，如下所示：

这是否违反了 Material Design 标准——是否意味着我有理由修改对话框的 UI 设计？如果没有，有没有直接的方法来实现这个？

Answer 1

您可以将

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                            
                }
            }
        }
   }

Answer 2

图像预览

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)
                ) {
                }
            })

    }