默认有两种构造方法
fun AlertDialog(
onDismissRequest: () -> Unit,//用户点击dailog外部或者后退键,dialog消失的时候走这里
buttons: @Composable () -> Unit,
modifier: Modifier = Modifier,
title: (@Composable () -> Unit)? = null,
text: @Composable (() -> Unit)? = null,
shape: Shape = MaterialTheme.shapes.medium,
backgroundColor: Color = MaterialTheme.colors.surface,
contentColor: Color = contentColorFor(backgroundColor),
properties: DialogProperties = DialogProperties()
)
内部其实就是个column,依次添加title,text,button,如下
Column {
AlertDialogBaselineLayout(
title = title?.let {},
text = text?.let {}
)
buttons()
}
DialogProperties 这个设置是否可以点击外部消失,时候回退键消失
constructor(
dismissOnBackPress: Boolean = true,
dismissOnClickOutside: Boolean = true,
securePolicy: SecureFlagPolicy = SecureFlagPolicy.Inherit,
)
fun AlertDialog(
onDismissRequest: () -> Unit,
confirmButton: @Composable () -> Unit,
modifier: Modifier = Modifier,
dismissButton: @Composable (() -> Unit)? = null,
title: @Composable (() -> Unit)? = null,
text: @Composable (() -> Unit)? = null,
shape: Shape = MaterialTheme.shapes.medium,
backgroundColor: Color = MaterialTheme.colors.surface,
contentColor: Color = contentColorFor(backgroundColor),
properties: DialogProperties = DialogProperties()
)
和第一个差不多,不过这里有两个button组件,最终其实也是组合成一个了。
buttons = {
// TODO: move the modifiers to FlowRow when it supports a modifier parameter
Box(Modifier.fillMaxWidth().padding(all = 8.dp)) {
AlertDialogFlowRow(
mainAxisSpacing = 8.dp,
crossAxisSpacing = 12.dp
) {
dismissButton?.invoke()
confirmButton()
}
}
},
效果如下
3个按钮的咋办? 最后的buttons是个compose,自己随意写,写个row放3个按钮就可以了。 alertDialog也就定义了个简单结构,有3部分,至于这三部分里边长啥样,完全取决于用户自己compose了
如下,简单使用
var show by remember {
mutableStateOf(false)
}
if (show) {
// AlertDialog(onDismissRequest = { show = false }, buttons = {
// TextButton(onClick = { show = false }, Modifier.fillMaxWidth()) {
// Text(text = "ok")
// }
// }, title = { Text(text = "title...") }, text = { Text(text = "content.、\ncontent....") })
AlertDialog(onDismissRequest = { show = false },
confirmButton = { Text(text = "ok", Modifier.clickable { show = false }) },
dismissButton = { Text(text = "cancel") },
title = { Text(text = "title...") },
text = { Text(text = "content.、\ncontent....") })
}
Button(onClick = { show = true }) {
Text(text = "show alert")
}