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

问题描述 投票:0回答:2

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

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

android kotlin dialog material-design android-jetpack-compose
2个回答
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                            
                }
            }
        }
   }


0
投票

图像预览

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

    }
© www.soinside.com 2019 - 2024. All rights reserved.