• JetPack Compose Material3的加载动画弹窗
    • 介绍
      • 代码示例
      • 特色
    • 版别环境要求
    • 引进（Gradle KotlinDSL举例）
      • 1. 设置库房源
      • 2. 引进依赖
    • 运用
      • 简略运用
      • 自定义显现内容
      • 自定义底部显现和躲藏
      • 展现一切动画

JetPack Compose Material3的加载动画弹窗

介绍

YangDialog是一个适合Compose Material3的弹窗UI组件，因为官方的DIalog组件功用很少，所以根据根底组件Dialog进行了修正和封装，

github地址

哔哩哔哩教程地址

代码示例

推荐个自己写的JetpackCompose的M3弹窗控件

特色

  • 弹窗一个带有加载动画和根本弹窗结构的UI组件，加载动画包含了常用的三个类型，一个Success显现成功的图标，Error显现错误的图标，Loading为加载中的状况，而且加载状况底部供给文本按钮给用户进行加载状况的操作。
  • 虽然是一个封装过的弹窗框架，可是供给了许多自定义的部分，比如自定义背景色，内容颜色，标题颜色，底部是否显现承认或者撤销按钮等，根据google官方Material3控件特点的设置习气，运用单例来配置颜色内容等特点，遮罩的点击回调，尽可能减少过多的学习本钱。
  • 弹窗的中心首要内容是供给组合函数让用户自定义展现运用的，并不会干扰弹窗的首要展现部分，可以自定义自己想显现的内容
  • 一切的动画都是已经设置好的，无需过多管理，运用AnimatedVisibility完成动画的各种情况，尽可能的让体验愈加的挨近原生，而且是根据最根底的Dialog组件进行扩展，所以不会出现太多过多封装形成的功能问题。

版别环境要求

  • Jetpack Compose Material3
  • Gradle 8.1.0以上(主张)
  • AGP 8.0.2以上(主张)
  • 最小SDK 26

引进（Gradle KotlinDSL举例）

1. 设置库房源

settings.gradle.kts中设置库房源

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven("https://jitpack.io")//添加库房源
    }
}

2. 引进依赖

APP模块下的build.gradle.kts

dependencies {
    //请去库房的releases中运用最新的版别即可(主张一向最新版别当时文档版别1.0.4)
    implementation("com.github.setruth:ComposeM3YangDialog:$releases")
	...
}

运用

简略运用

 var dialogShow by remember {
     mutableStateOf(true)
 }
YangDialog(
    title = "这是普通弹窗",
    isShow = dialogShow,//经过isShow展现或者躲藏dialog
    onCancel = {//撤销选项的回调
        dialogShow = false
    },
    //底部设置
    bottomConfig = YangDialogDefaults.bottomConfig(
        confirmActive = false //不激活承认选项 
    ),
    onDismissRequest = { //遮罩层点击的回调
        dialogShow = false
    },
) {
    Text(text = "hello")
}
推荐个自己写的JetpackCompose的M3弹窗控件

自定义显现内容

var dialogShow by remember {
    mutableStateOf(true)
}
var inputContent by remember {
    mutableStateOf("")
}
YangDialog(
    title = "这是自定义内容弹窗",
    isShow = dialogShow,
    onCancel = {
        dialogShow = false
    },
    onConfirm = {
        dialogShow = false
    },
) {
    OutlinedTextField(value = inputContent, onValueChange = { inputContent = it })//自定义内容
}
推荐个自己写的JetpackCompose的M3弹窗控件

自定义底部显现和躲藏

var dialogShow by remember {
    mutableStateOf(true)
}
YangDialog(
    title = "自定义底部选项的弹窗",
    isShow = dialogShow,
    onCancel = {
        dialogShow = false
    },
    onConfirm = {
        dialogShow = false
    },
    //经过YangDialogDefaults.bottomConfig设置底部选项的配置
    bottomConfig = YangDialogDefaults.bottomConfig(
        showCancel = false,
        confirmTip = "承认将会封闭弹窗"
    )
) {
    Text(text = "hello")
}
推荐个自己写的JetpackCompose的M3弹窗控件

展现一切动画

var dialogShow by remember {
    mutableStateOf(true)
}
var dialogType by remember {
    mutableStateOf(YangDialogLoadingType.NOT_LOADING)
}
var loadingTip by remember {
    mutableStateOf("")
}
var startLoading by remember {
    mutableStateOf(false)
}
LaunchedEffect(startLoading){
   if (startLoading){
       loadingTip="加载"
       dialogType=YangDialogLoadingType.LOADING
       delay(1500)
       dialogType=YangDialogLoadingType.ERROR
       loadingTip="失败"
       delay(1500)
       dialogType=YangDialogLoadingType.SUCCESS
       loadingTip="成功"
   }
}
YangDialog(
    loadingState = dialogType,//经过改动loadingState来显现对应的动画
    loadingTip = loadingTip,//加载动画下面的提示文本，为空不显现
    title = "这是自定义内容弹窗",
    isShow = dialogShow,
    onCancel = {
        dialogShow = false
        dialogHide()
    },
    //加载动画的底部文本的点击回调，回来当时加载的状况
    onLoadingTipClick = {
        if (it==YangDialogLoadingType.SUCCESS) {
            dialogType=YangDialogLoadingType.NOT_LOADING
        }
    },
    onConfirm = {
       startLoading=true
    },
    bottomConfig = YangDialogDefaults.bottomConfig(
        confirmTip = "开端加载动画"
    )
)
推荐个自己写的JetpackCompose的M3弹窗控件