「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」

本篇文章就说说 Compose的消息弹窗

Compose的AlertDialog弹窗不像传统的Dialogn那么死板，Compose的十分灵活，

官网的介绍是这样的:
对话框将根据可用空间定位其按钮。默认情况下，它将尝试将它们水平放置在彼此相邻的位置，如果没有足够的可用空间，则返回到水平放置。还有另一个版本的这个组合，有一个插槽的按钮，以提供自定义按钮布局。

Compose的灵活提现在自定义上面
传统的AlertDialog自定义起来有点小麻烦，而Compose写出来就是自定义了，这一点我就爱了。

步入正题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用于自定义对话框行为的属性。

使用方法

val showingDialog = remember { mutableStateOf(false) }

用remember来判断Dialog是否显示 mutableStateOf用布尔值定义

简单使用

@Composable
private fun AlertDialog() {
    val showingDialog = remember { mutableStateOf(false) }
    if (showingDialog.value) {
        AlertDialog(
            onDismissRequest = {
                showingDialog.value = false
            },
            
             title = {
                Text(text = "标题")
            },
            text = {
                Text(text = "副标题")
            },
           
            confirmButton = {
                TextButton(
                    onClick = {
                        showingDialog.value = false
                    },
                    modifier = Modifier
                        .padding(16.dp)
                ) {
                    Text("按钮")
                }
            },
        )
    }
    //触发弹窗的按钮
    Button(
        onClick = { showingDialog.value = true },
    ) {
        Text(
            text =  "Default dialog"
        )
    }
}

显示弹窗

showingDialog.value = true

Dismiss的回调

 onDismissRequest = {
                showingDialog.value = false
            }

contentColor的作用

contentColor = Color.Cyan,

就是可以改变内容的颜色

是不是觉得方方正正不是很好看那就来material3试试

material3‘

导入依赖

implementation("androidx.compose.material3:material3:1.0.0-alpha03")

写本篇文章的时候最新是1.0.0-alpha03 最新版本自行查阅 compose-material3官网

替换导入的包

import androidx.compose.material3.*

就可以了效果图

圆润了不少

material3中contentColor方法换成了textContentColor和titleContentColor
分别设置文本和标题的字体颜色

新增
containerColor可以理解成背景颜色

containerColor = Color.Cyan

iconContentColor 小图标的颜色

tonalElevation当containerColor为ColorScheme时。在曲面上，色调提升值越高，亮主题中的对话框颜色越深，而暗主题中的对话框颜色越浅

tonalElevation = 6.dp,

亮色主题

暗色主题

理解为传统的Elevation方法就可以了

Jetpack Compose弹窗 Material-AlertDialog和Material3-AlertDialog

使用方法

简单使用

material3‘