Jetpack Compose干货，如何让Compose Dialog从屏幕任意方向进入

一、前言

来个效果图，基于Compose Dialog，最终要实现的库能力如下：

底部/顶部/左侧/右侧.gif

这里使用的是这个包下面的：
androidx.compose.ui.window.Dialog

androidx.compose.material3.AlertDialog它内部调用的也是androidx.compose.ui.window.Dialog

不想阅读文章的，可以直接滑到文章末尾，我提供了源码和集成指南。

谷歌提供给我们的compose-ui-dialog，并没有看到能够控制从屏幕底部进入的方法，都是最基础的属性和参数。

// androidx.compose.ui.window.Dialog
@Composable
fun Dialog(onDismissRequest: () -> Unit,properties: DialogProperties = DialogProperties(),content: @Composable () -> Unit
) {....
}// androidx.compose.material3.AlertDialog
@Composable
fun AlertDialog(onDismissRequest: () -> Unit,confirmButton: @Composable () -> Unit,modifier: Modifier = Modifier,dismissButton: @Composable (() -> Unit)? = null,icon: @Composable (() -> Unit)? = null,title: @Composable (() -> Unit)? = null,text: @Composable (() -> Unit)? = null,shape: Shape = AlertDialogDefaults.shape,containerColor: Color = AlertDialogDefaults.containerColor,iconContentColor: Color = AlertDialogDefaults.iconContentColor,titleContentColor: Color = AlertDialogDefaults.titleContentColor,textContentColor: Color = AlertDialogDefaults.textContentColor,tonalElevation: Dp = AlertDialogDefaults.TonalElevation,properties: DialogProperties = DialogProperties()
) {....
}

扫一眼源码，并没有看到能够控制Dialog从哪个方向弹出来，那么我们应该如何解决这个问题呢，毕竟不能直接使用Dialog我就很难受😁，你们是不是一样，请在评论区留言讨论🖋。

二、默认Dialog能怎么玩

不要认为我在凑字数划水，不过说实话确实有点像，不感兴趣的，可以直接跳到目录三

既然用默认Dialog，那就中规中矩的玩😁，来个守规矩的Dialog示例

@Composable
fun MinimalDialog(onDismissRequest: () -> Unit) {Dialog(onDismissRequest = { onDismissRequest() }) {Card(modifier = Modifier.fillMaxWidth().height(200.dp).padding(16.dp),shape = RoundedCornerShape(16.dp),) {Text(text = "This is a minimal dialog",modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.Center),textAlign = TextAlign.Center,)}}
}


AlertDialog(onDismissRequest = onDismissRequest,icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },title = {Text(text = "Title")},text = {Text("This area typically contains the supportive text " +"which presents the details regarding the Dialog's purpose.")},confirmButton = {TextButton(onClick = {// 自己实现点击事件}) {Text("Confirm")}},dismissButton = {TextButton(onClick = {// 自己实现点击事件}) {Text("Dismiss")}})

我们可以看到都是基础到不能再基础的参数设置了，改改参数试试？

试试就试试，谁怕谁啊，把第一个Dialog示例的Modifier修饰符修改一下使用fillMaxSize试试咯。

我们看到宽度、高度没有真正的全屏，宽度这个好解决，只需要配置一下DialogProperties(usePlatformDefaultWidth = false) 即可(这里读者自己试试吧)，那么高度怎么解决呢？

我们需要延伸到系统栏，众所周知Android目前除了有小横条之外，还保留了虚拟键的三大金刚，如果无法把内容延伸到系统栏，这就不是真的全屏，而是伪全屏啊，看着就难受啊。

有同学又会说：我直接用BottomSheetScaffold不也行吗？自己封装一个BottomSheetContent放在Scaffold组件里面。

这些都要根据不同业务重度封装弹出组件了，有些业务你可能需要xml+composeView的形式，用Dialog具有更通用性。

下面我们来研究一下，如何继续下面的目录内容。

三、Dialog实现分析

打开我们的AndroidDialog.android.kt

@Composable
fun Dialog(onDismissRequest: () -> Unit,properties: DialogProperties = DialogProperties(),content: @Composable () -> Unit
) {...val dialog = remember(view, density) {DialogWrapper(view, ...).apply {setContent(composition) {DialogLayout(Modifier.semantics { dialog() }) {currentContent()}}}}...
}

我们打开DialogWrapper方法，看到setContentView它内部仍然是window.setContentView(View)：

@OptIn(ExperimentalComposeUiApi::class)
private class DialogWrapper(private val composeView: View,...
) : ComponentDialog(...){init {...dialogLayout = DialogLayout(context, window)...setContentView(dialogLayout)...}
}

然后呢，我们打开DialogLayout看看里面实现了什么：

@Suppress("ViewConstructor")
private class DialogLayout(context: Context,override val window: Window
) : AbstractComposeView(context), DialogWindowProvider {...override fun internalOnMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {if (usePlatformDefaultWidth) {super.internalOnMeasure(widthMeasureSpec, heightMeasureSpec)} else {val displayWidthMeasureSpec =MeasureSpec.makeMeasureSpec(displayWidth, MeasureSpec.AT_MOST)val displayHeightMeasureSpec =MeasureSpec.makeMeasureSpec(displayHeight, MeasureSpec.AT_MOST)super.internalOnMeasure(displayWidthMeasureSpec, displayHeightMeasureSpec)}}override fun internalOnLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {super.internalOnLayout(changed, left, top, right, bottom)val child = getChildAt(0) ?: return// 设置WindowManager.LayoutParamswindow.setLayout(child.measuredWidth, child.measuredHeight)}private val displayWidth: Intget() {val density = context.resources.displayMetrics.densityreturn (context.resources.configuration.screenWidthDp * density).roundToInt()}private val displayHeight: Intget() {val density = context.resources.displayMetrics.densityreturn (context.resources.configuration.screenHeightDp * density).roundToInt()}...
}

我们从上面代码可以看到 usePlatformDefaultWidth = false，不使用平台默认的宽度，可以实现全屏宽度。
代码中我们又看到了内部有2个变量：displayWidth和displayHeight，他们两个返回的值分别是什么意思，建议大家去看源码注释非常详细，注释内容比较多，这里精简一下，大概的意思就是：

即使你调用：Window#setDecorFitsSystemWindows(boolean)

screenWidthDp、screenHeightDp 它返回的width、height
是不包含WindowInsets衬区的大小在内的。

点击查看什么是WindowInsets

e2e-intro.gif

我们是不是可以通过decoreView获取真实的宽度和高度，答案是肯定的，那么我们如何通过Compose实现呢？

四、Dialog从屏幕底部进入

继续上面的内容，我们应该如何获取Window，这里我们需要分别获取2个Window：

一个是Dialog的Window，一个是Activity的Window。

在埋着头写无穷无尽的业务代码的时候😁，任何人都讨厌问十万个为什么问题的同学，因为这个时候人的怒气值是101%的，但是一但闲下来没事做的时候，就喜欢十万个为什么。

理由一：我们不能直接修改dialog.window = activityWindow，即使可以也不能直接使用type不一样晓得不，有人又会问什么type，请读者自己查看源码：window.attributes.type，不可能全部都介绍一遍。

理由二：默认的dialog的window里面的属性无法适应WindowInsets衬区

理由N：你自己想一想…

回到正题，那么如何获取Dialog的Window呢？

细心的同学可能这里已经发现了，因为他是真的在参考源码，阅读文章的，我们上面的代码刚介绍了DialogLayout，不知道你们注意了没，它实现了DialogWindowProvider 接口，而这个接口只有一个变量就是Window，这很重要

interface DialogWindowProvider {val window: Window
}

同时我们还看到 DialogLayout 继承 AbstractComposeView，说到这里，我猜应该有同学知道怎么实现了，有点懵的😳，继续往下看。

1、获取Dialog的Window

我们使用Compose的Dialog一般是这样填充视图内容：

Dialog(...content = {// 这里放可组合项视图}
)

如果你不知道Compose UI创建布局绘制的流程，你可以点击查看我这一篇文章，我们可以通过LocalView.current获取当前的AndroidComposeView，刚刚上面讲的内容，忘记的请动动鼠标往上翻一下。

我们定义一个方法返回Dialog的Window的方法:

@Composable
private fun getDialogWindow(): Window? = (LocalView.current.parent as? DialogWindowProvider)?.window

2、获取Activity的Window

我们可以通过Context下手，通过递归的方式，判断是不是Activity，如果是则可以获取window了，那么可以定义如下的方法：

@Composable
private fun getActivityWindow(): Window? = LocalView.current.context.getActivityWindow()private tailrec fun Context.getActivityWindow(): Window? = when (this) {is Activity -> windowis ContextWrapper -> baseContext.getActivityWindow()else -> null
}

3、实现底部动画弹出Dialog

有了上面的内容支撑之后，我们可以往下实现了，首先需要定义一个全屏的Dialog可组合项：

@Composable
private fun DialogFullScreen(onDismissRequest: () -> Unit,content: @Composable () -> Unit
) {Dialog(onDismissRequest = onDismissRequest,properties = ...,content = {// 这里放Dialog的窗口内容...})
}

一点点加入代码，把获取Window的代码放在content中，然后在SideEffect去更新DialogWindow：

@Composable
private fun DialogFullScreen(...) {Dialog(...properties = DialogProperties(usePlatformDefaultWidth = true,decorFitsSystemWindows = false),content = {val activityWindow = getActivityWindow()val dialogWindow = getDialogWindow()  SideEffect {if (activityWindow != null && dialogWindow != null) {val attributes = WindowManager.LayoutParams()// 复制Activity窗口属性attributes.copyFrom(activityWindow.attributes)// 这个一定要设置attributes.type = dialogWindow.attributes.type// 更新窗口属性dialogWindow.attributes = attributes// 设置窗口的宽度和高度，这段代码Dialog源码中就有哦，可以自己去查看dialogWindow.setLayout(activityWindow.decorView.width,activityWindow.decorView.height)}}    })
}

可能这个时候又有同学疑问了，不对啊，怎么上面你说宽度铺满，告诉我们usePlatformDefaultWidth设置false，这里怎么是设置为true了？

问的好，请看源码，设置false，会走源码内部的新测量分支，会使用displayWidth、displayHeight，这个是不含WindowInsets衬区的，因为它的 mode = MeasureSpec.AT_MOST，所以这里我们不用，不然竖屏高度，或者横屏宽度，你懂得，还需要再说的更详细嘛，大家都懂的。

这个时候我们如果设置完Dialog内容视图之后，你会发现，Dialog自带的变暗背景色和点击空白区关闭Dialog失效了，并且是没有动画的，我们这个时候可以使用AnimatedVisibility来让内容通过动画的形式进入屏幕。

什么时候执行动画呢，我们只需要在dialogWindow.setLayout代码后面更新visible状态变量就行了。

AnimatedVisibility(modifier = Modifier.pointerInput(Unit) {},visible = isAnimateLayout,enter = slideInVertically(initialOffsetY = { it }),exit = fadeOut() + slideOutVertically(targetOffsetY = { it }),
) {content()
}

然后暗色背景渐入渐出，我们加个蒙层背景视图即可，使用Animatable更新暗色背景渐入渐出。

大家自行润色一下代码细节就可以使用了，源码在文章目录五查看：

    DialogFullScreen(onDismissRequest = onDismiss,properties = properties) {Column(modifier = modifier.navigationBarsPadding(),horizontalAlignment = Alignment.CenterHorizontally) {content()}}

我们再更新一下代码，增加控制方向的属性，这样就可以控制它是从：底部/顶部/左侧/右侧 弹出。

如果是屏幕中间弹出，建议你直接使用默认的Dialog可组合项即可。

同样的，增加控制方向的属性之后，只需要更新AnimatedVisibility即可。

底部/顶部/左侧/右侧.gif

五、如何集成

1、源码

AnyPopDialog-Compose

2、集成

implementation("io.github.TheMelody:any_pop_dialog_compose:1.0.0")

3、用法

@Composable
fun TestXXXX() {var showDialog by remember { mutableStateOf(false) }if (showDialog) {var isActiveClose by remember { mutableStateOf(false) }AnyPopDialog(modifier = Modifier.fillMaxWidth().background(...),isActiveClose = isActiveClose,// 根据你自己的功能，调整进入方向即可，支持:TOP/LEFT/RIGHT/BOTTOMproperties = AnyPopDialogProperties(direction = DirectionState.BOTTOM),content = {// 这里放你自己的Dialog内容// 如果你需要在你自己的组件中想动画关闭Dialog，请更新isActiveClose},onDismiss = { showDialog = false })}...
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/140078.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

Android开源 日志框架 LogDog V2.3.1

Android开源 日志框架 LogDog V2.3.1

目录 一、简介 二、下载使用 添加jitpack 仓库 添加依赖: 三、更改 1、 LogDogV2.3.1初始化: 2、通过上面的初始化 ，已经知道IJsonEngine 优化了泛型参数，采用 Object/Any 3、优化空异常的判断，哪怕打印变量是NULL LogDog会打印“nul…
阅读更多...
Activiti7工作流 二【Activiti7入门、Activiti7进阶】

Activiti7工作流 二【Activiti7入门、Activiti7进阶】

文章目录 六、Activiti7入门6.1 业务流程建模6.1.1 绘制流程图6.1.2 指定任务负责人6.1.3 生成png格式流程图 6.2 部署流程定义6.3 启动流程实例6.4 任务查询6.5 任务处理6.6 添加审批意见6.6 查看历史审批 七、Activiti7进阶7.1 流程定义相关7.1.1 流程定义查询7.1.2 流程资源…
阅读更多...
有哪些好用的上网行为管理软件?（上网行为管理软件功能好的软件推荐）

有哪些好用的上网行为管理软件?（上网行为管理软件功能好的软件推荐）

随着互联网的快速发展，企业的信息化管理和员工的上网行为已经成为企业信息化建设的重要组成部分。上网行为管理软件作为一种新型的管理工具，可以帮助企业实现对员工上网行为的管控和优化，进而提高企业的工作效率和网络安全。本文将对多款市场…
阅读更多...
minio文件上传

minio文件上传

1.代码 大佬仓库：https://gitee.com/Gary2016/minio-upload?_fromgitee_search 关于这个代码的讲解：来自b站 2.准备minio 参考：[1]、[2] 2.1 下载 官网：https://min.io/download#/windows 2.2 启动 ①准备一个data文件夹…
阅读更多...
树、二叉树、堆及其应用（堆排序、top-k问题）

树、二叉树、堆及其应用（堆排序、top-k问题）

目录 树的概念与结构 概念： 与树相关的概念: 树的表示： 二叉树 概念： 特殊的二叉树： 二叉树性质： 二叉树的存储结构： 堆 堆的概念: 堆的实现： 堆的创建： 堆的插入： 堆的删…
阅读更多...
【算法思想-排序】排序数组-力扣 912 题

【算法思想-排序】排序数组-力扣 912 题

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…
阅读更多...
OJ练习第180题——颠倒二进制位

OJ练习第180题——颠倒二进制位

颠倒二进制位 力扣链接：190. 颠倒二进制位 题目描述 颠倒给定的 32 位无符号整数的二进制位。 提示： 请注意，在某些语言（如 Java）中，没有无符号整数类型。在这种情况下，输入和输出都将被指…
阅读更多...
2023华为杯数学建模研赛E题全解析

2023华为杯数学建模研赛E题全解析

2023华为杯数学建模研赛E题解析，完整版已出!!! 包含所有模型、代码、结果，39页技术文档，详细内容如下! 免费版链接已放在下面，需要的同学可以直接自取~ 【云顶数模】2023研究生数学建模免费链接： https://pan.baid…
阅读更多...
【Redis】专栏合集，从入门到高级业务场景实战

【Redis】专栏合集，从入门到高级业务场景实战

作者简介 目录 1.概述 2.下载安装 3.基础操作 4.集群 5.实战场景 1.概述 诸如数mysql、Oracle之类的关系型数据库或者NTFS、HDFS之类的文件存储系统，其本质上数据都是存在磁盘上的。这是现代计算机体系架构的架构所决定的，要持久化存储的数据都会落…
阅读更多...
卸载Visual Studio 2010学习版 —— 卸载VCExpress

卸载Visual Studio 2010学习版 —— 卸载VCExpress

目录 最初安装Visual Studio 2010学习版是因为计算机二级 C语言考试而装，现如今考完试后便可卸载掉了，安装简便而卸载却没有uninstall.exe文件。故本文提供卸载方式。 进入到程序目录，找到setup.exe文件，也可以在程序目录搜索set…
阅读更多...
RDMA编程杂记

RDMA编程杂记

目录 编程杂记什么是P_Key建链基于Socket API的建链基于CM API的建链 编程杂记 什么是P_Key P_Key（Partition Key）用于提供InfiniBand网络的隔离机制，只有在一个分区内的节点可以互相通信。 P_Key是一个16位的值，有两部分 msb…
阅读更多...
CRM客户管理系统英文专业版

CRM客户管理系统英文专业版

外资公司日常沟通的语言以英文为主，业务往来也是涉及到国内外，专业的英文版CRM系统很适合这样的业务团队，尤其CRM供应商是国际化企业，在海外也有分公司、办事处。 多语言 ZOHO支持多语种如英语、汉语、日语等28种语言&#xff0…
阅读更多...
Android面试题汇总（三）

Android面试题汇总（三）

Android 四大组件相关 1、Activity与Fragment之间常见的通讯方式 对于Activity与Fragment直接的相互调用： 1、Activity调用Fragment直接调用就好了，Activity一般是持有Fragment实例的。或者通过Fragment的id或者tag获取Fragment的实例 2、Fragment调用A…
阅读更多...
攻防世界做题

攻防世界做题

xff_referer 进来之后显示ip地址必须为123.123.123.123 抓包看一下 要求ip是123.123.123.123 就可以用xff伪造即X-Forwarded-For: 123.123.123.123 得到显示： 说必须来自google，伪造referer Referer: https://www.google.com 我的要在右边的 inspec…
阅读更多...
[学习记录] 设计模式 3. 观察者模式

[学习记录] 设计模式 3. 观察者模式

观察者模式 参考： bugstack 虫洞栈Refactoringhttps://www.cnblogs.com/myseries/p/8735490.htmlhttps://www.jianshu.com/p/4f1cd513a72d 当一个行为发生时传递信息给另外一个用户接收做出相应的处理，两者之间没有直接的耦合关联。 在我们编程开发中也…
阅读更多...
计算机视觉: 三维物体生成

计算机视觉: 三维物体生成

三维物体生成与编辑 论文地址: Controllable Mesh Generation Through Sparse Latent Point Diffusion Models 背景 数据是目前数字化和AI领域最宝贵的财富之一，但是对于目前的开发者来说，收集数据都意味着极大的成本。所以建立一个高效的生成模型能极…
阅读更多...
Java多线程篇(5)——cas和atomic原子类

Java多线程篇(5)——cas和atomic原子类

文章目录 CASAtomic 原子类一般原子类针对aba问题 —— AtomicStampedReference针对大量自旋问题 —— LongAdder CAS 原理大致如下： 在java的 Unsafe 类里封装了一些 cas 的api。以 compareAndSetInt 为例，来看看其底层实现。 可以发现，最…
阅读更多...
GPT，GPT-2，GPT-3，InstructGPT的进化之路

GPT，GPT-2，GPT-3，InstructGPT的进化之路

ChatGPT 火遍圈内外，突然之间，好多人开始想要了解 NLP 这个领域，想知道 ChatGPT 到底是个什么？作为在这个行业奋斗5年的从业者，真的很开心让人们知道有一群人在干着这么样的一件事情。这也是我结合各位大佬的文章&…
阅读更多...
【AIGC】Stable Diffusion Prompt 每日一练0916

【AIGC】Stable Diffusion Prompt 每日一练0916

一、前言 1.1 写在前面 本文是一个系列，有点类似随笔，每天一次更新，重点就Stable Diffusion Prompt进行专项训练，本文是第022篇《Stable Diffusion Prompt 每日一练0916》。上一篇《Stable Diffusion Prompt 每日一练0915》 1.…
阅读更多...
Android Jetpack Compose之UI的重组和自动刷新

Android Jetpack Compose之UI的重组和自动刷新

1.概述 我们都知道，在传统的View中，若要改变UI，需要我们修改View的私有属性，比如要修改一个TextView的文字，我们需要通过它的setText(“xxx”)方法去修改。而Compose 则是通过重组来刷新UI。在之前的状态管理的文章中…
阅读更多...
最新文章

Copyright @ 2022~2023