compose > alertDialog

312 阅读1分钟

默认有两种构造方法

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()
        }
    }
},

效果如下 image.png

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