如何使用 Compose 删除 AlertDialog 和标题/文本之间的填充

Question

使用 compose，我想创建这样的东西：

问题是使用 compose AlertDialog 我只能实现以下目的：

AlertDialog 边框和标题之间存在无法删除的填充。如何使用 Compose 删除它？使用Modifier.padding(all = 0.dp)不行。我在各个层面都尝试过。

Answer 1

属性“title”和“text”使用添加填充的 AlertDialogBaselineLayout 进行包装。您无法将其删除。

\n

我制作了一个自定义可组合项，它充当 AlertDialog 并且不使用 AlertDialogBaselineLayout。

\n

您可以复制/粘贴它并根据您的需要进行编辑：

\n

无填充警报对话框：

\n

@Composable\nfun NoPaddingAlertDialog(\n    onDismissRequest: () -> Unit,\n    modifier: Modifier = Modifier,\n    title: @Composable (() -> Unit)? = null,\n    text: @Composable (() -> Unit)? = null,\n    confirmButton: @Composable () -> Unit,\n    dismissButton: @Composable (() -> Unit)? = null,\n    shape: Shape = MaterialTheme.shapes.medium,\n    backgroundColor: Color = MaterialTheme.colors.surface,\n    contentColor: Color = contentColorFor(backgroundColor),\n    properties: DialogProperties = DialogProperties()\n) {\n    Dialog(\n        onDismissRequest = onDismissRequest,\n        properties = properties\n    ) {\n        Surface(\n            modifier = modifier,\n            shape = shape,\n            color = backgroundColor,\n            contentColor = contentColor\n        ) {\n            Column(\n                modifier = Modifier\n                    .fillMaxWidth()\n            ) {\n                title?.let {\n                    CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {\n                        val textStyle = MaterialTheme.typography.subtitle1\n                        ProvideTextStyle(textStyle, it)\n                    }\n                }\n                text?.let {\n                    CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {\n                        val textStyle = MaterialTheme.typography.subtitle1\n                        ProvideTextStyle(textStyle, it)\n                    }\n                }\n                Box(\n                    Modifier\n                        .fillMaxWidth()\n                        .padding(all = 8.dp)\n                ) {\n                    Row(\n                        horizontalArrangement = Arrangement.End,\n                        modifier = Modifier.fillMaxWidth()\n                    ) {\n                        dismissButton?.invoke()\n                        confirmButton()\n                    }\n                }\n            }\n        }\n    }\n}\n

\n

然后您可以这样轻松地使用它：

\n

@Composable\nfun MyCustomAlertDialog(openDialog: MutableState<Boolean> = mutableStateOf(true)) {\n    if (openDialog.value) {\n        NoPaddingAlertDialog(\n            title = {\n                Surface(\n                    color = Color.Blue,\n                    contentColor = Color.White,\n                    modifier = Modifier\n                        .fillMaxWidth()\n\n                ) {\n                    Text(\n                        text = " Popup Title\xef\xb8\x8f",\n                        textAlign = TextAlign.Center,\n                        modifier = Modifier\n                            .fillMaxWidth()\n                            .padding(horizontal = 8.dp, vertical = 16.dp),\n                    )\n                }\n            },\n            text = {\n                Column(Modifier.fillMaxWidth()) {\n                    OutlinedTextField(\n                        modifier = Modifier\n                            .align(Alignment.CenterHorizontally)\n                            .padding(horizontal = 8.dp, vertical = 16.dp)\n                            .fillMaxWidth(),\n                        value = "Alert Dialog content ...",\n                        onValueChange = { },\n                        label = { Text(text = "Content") },\n                    )\n                }\n            },\n            onDismissRequest = { /*TODO*/ },\n            confirmButton = {\n                PopupButton(title = "Ok", setShow = {\n                    openDialog.value = false\n                })\n            },\n            dismissButton = {\n                PopupButton(\n                    title = "Cancel",\n                    setShow = {\n                        openDialog.value = false\n                    }\n                )\n            }\n        )\n    }\n}\n

\n

并得到这个：

\n

\n