使用compose,我想创建如下内容:
问题是使用组合AlertDialog,我只能实现以下功能:
在AlertDialog边框和标题之间有一个无法删除的填充。如何使用合成删除它?使用Modifier.padding(all = 0.dp)不起作用。我尝试了每一个级别。
Modifier.padding(all = 0.dp)
oxiaedzo1#
属性“title”和“text”被AlertDialogBaselineLayout Package ,该布局正在添加填充。您无法删除它。我创建了一个自定义组合,它充当AlertDialog,但不使用AlertDialogBaselineLayout。您可以根据自己的需要进行复制/粘贴和编辑:
无填充警报对话框:
@Composable fun NoPaddingAlertDialog( onDismissRequest: () -> Unit, modifier: Modifier = Modifier, title: @Composable (() -> Unit)? = null, text: @Composable (() -> Unit)? = null, confirmButton: @Composable () -> Unit, dismissButton: @Composable (() -> Unit)? = null, shape: Shape = MaterialTheme.shapes.medium, backgroundColor: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(backgroundColor), properties: DialogProperties = DialogProperties() ) { Dialog( onDismissRequest = onDismissRequest, properties = properties ) { Surface( modifier = modifier, shape = shape, color = backgroundColor, contentColor = contentColor ) { Column( modifier = Modifier .fillMaxWidth() ) { title?.let { CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) { val textStyle = MaterialTheme.typography.subtitle1 ProvideTextStyle(textStyle, it) } } text?.let { CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) { val textStyle = MaterialTheme.typography.subtitle1 ProvideTextStyle(textStyle, it) } } Box( Modifier .fillMaxWidth() .padding(all = 8.dp) ) { Row( horizontalArrangement = Arrangement.End, modifier = Modifier.fillMaxWidth() ) { dismissButton?.invoke() confirmButton() } } } } } }
然后,您可以轻松地按以下方式使用它:
@Composable fun MyCustomAlertDialog(openDialog: MutableState<Boolean> = mutableStateOf(true)) { if (openDialog.value) { NoPaddingAlertDialog( title = { Surface( color = Color.Blue, contentColor = Color.White, modifier = Modifier .fillMaxWidth() ) { Text( text = " Popup Title️", textAlign = TextAlign.Center, modifier = Modifier .fillMaxWidth() .padding(horizontal = 8.dp, vertical = 16.dp), ) } }, text = { Column(Modifier.fillMaxWidth()) { OutlinedTextField( modifier = Modifier .align(Alignment.CenterHorizontally) .padding(horizontal = 8.dp, vertical = 16.dp) .fillMaxWidth(), value = "Alert Dialog content ...", onValueChange = { }, label = { Text(text = "Content") }, ) } }, onDismissRequest = { /*TODO*/ }, confirmButton = { PopupButton(title = "Ok", setShow = { openDialog.value = false }) }, dismissButton = { PopupButton( title = "Cancel", setShow = { openDialog.value = false } ) } ) } }
听好了
pqwbnv8z2#
你可以用Dialog()代替AlertDialog()。它允许你传入一个可组合对象作为content参数,这样你就可以设置你想要的任何填充。只是不要忘记在内容的根可组合对象中设置背景色,因为它默认是透明的。
Dialog()
AlertDialog()
content
2条答案
按热度按时间oxiaedzo1#
属性“title”和“text”被AlertDialogBaselineLayout Package ,该布局正在添加填充。您无法删除它。
我创建了一个自定义组合,它充当AlertDialog,但不使用AlertDialogBaselineLayout。
您可以根据自己的需要进行复制/粘贴和编辑:
无填充警报对话框:
然后,您可以轻松地按以下方式使用它:
听好了
pqwbnv8z2#
你可以用
Dialog()
代替AlertDialog()
。它允许你传入一个可组合对象作为content
参数,这样你就可以设置你想要的任何填充。只是不要忘记在内容的根可组合对象中设置背景色,因为它默认是透明的。