compose dialog 应用

简单使用

/**
 * 这个是一个标准的dialog 弹框
 */
@Composable
fun AddAlterDialog(alertDialog: MutableState<Boolean>, onClose: () -> Unit) {
    if (alertDialog.value) {
        AlertDialog(
            onDismissRequest = { alertDialog.value = false },
            title = { Text(text = "标题") },
            text = {
                Text(
                    text = "文本内容"
                )
            }, confirmButton = {
                TextButton(
                    onClick = onClose
                ) {
                    Text(text = "确认")
                }
            }, dismissButton = {
                TextButton(onClick = { alertDialog.value = false }) {
                    Text(text = "取消")
                }
            })
    }
}

查看效果代码

@Preview(showBackground = true)
@Composable
fun AddApplayDialog() {
    val alertDialog = remember { mutableStateOf(false) }
    val context = LocalContext.current
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = {
            alertDialog.value = true
        }) {
            Text(text = "弹了个框")
        }
    } 
      AddAlterDialog(alertDialog, onClose = {
          alertDialog.value = false
          Toast.makeText(context, "点击了确定", Toast.LENGTH_SHORT).show()
      })
    }

效果图

看上去还不错。
里面的属性 AlertDialog有十个参数
1.onDismissRequest Dismiss的回调单击“取消”按钮时，不会调用此选项。
2.modifier 应用于对话框布局的修改器。
3.confirmButton 确认按钮要传入一个按钮的Compose控件
4.dismissButton 关闭对话框的按钮要传入一个按钮的Compose控件
5.title 标题
6.text 显示有关对话框用途的详细信息的文本。默认的文本样式将是排版。Typography.body2
7.shape 定义对话框的形状
8.backgroundColor 背景色
9.contentColor 为此对话框为其子级提供的首选内容颜色。
10.properties用于自定义对话框行为的属性。
自定义之后颜色之后

效果图

其实我想要的是底部菜单和全屏菜单

自定义dialog

全屏版本

微信截图_20220615145200.png

从底部弹出

微信截图_20220615160804.png

这样才能进行使用

全屏代码


/**
 *
 * 全屏的 dialog 显示
 *
 */
@OptIn(ExperimentalComposeUiApi::class)
@Composable
private fun FullScreenDialog(alertDialog: MutableState<Boolean>) {
    if (alertDialog.value) {
        Dialog(
            onDismissRequest = {
                alertDialog.value = false
            },
            properties = DialogProperties(
                usePlatformDefaultWidth = false
            ),
        ) {
            Surface(
                modifier = Modifier
                    .fillMaxSize(),
                color = Color.White
            ) {
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center,
                ) {
                    Text(
                        modifier = Modifier.align(Alignment.TopCenter),
                        text = "top"
                    )
                    Text("center")
                    Text(
                        modifier = Modifier.align(Alignment.BottomCenter),
                        text = "bottom"
                    )
                }
            }
        }
    }
}

usePlatformDefaultWidth = false 这个设置很重要，就是默认的宽度去掉，自己去设置就行了。

底部菜单，会用到 com.google.android.material.bottomsheet 里面的BottomSheetDialog.java

这个是java 文件，这样写就是很怪了。kt里面调用java 内容了。
所以不得不看androidx.compose.ui.layout

具体怎么用，https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/layout/package-summary

image.png

我从别人的方法里面看到


@Composable
private fun BottomSheetDialogLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier
    ) { measurables, constraints ->
        val placeables = measurables.fastMap { it.measure(constraints) }
        val width = placeables.fastMaxBy { it.width }?.width ?: constraints.minWidth
        val height = placeables.fastMaxBy { it.height }?.height ?: constraints.minHeight
        layout(width, height) {
            placeables.fastForEach { it.placeRelative(0, 0) }
        }
    }
}

好凌乱啊，看不太懂具体怎么做，方法实现了，功能实现了就是不知道为啥。