这篇文章主要介绍“Jetpack Compose怎么实现对话框和进度条”,在日常操作中,相信很多人在Jetpack Compose怎么实现对话框和进度条问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Jetpack Compose怎么实现对话框和进度条”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
概述
对话框和进度条其实并无多大联系,放在一起写是因为两者的内容都不多,所以凑到一起,对话框是我们平时开发使用得比较多的组件,像隐私授权,用户点击删除时给用户提示这是一个危险操作等,进度条的使用频率也很高,比如下载文件,上传文件,处理任务时都可以使用进度条,让用户知道系统还在运行,没有死机。
实例解析
1.对话框Dialog
首先我们可以先看下Compose中对话框的参数列表
@Composablefun Dialog( onDismissRequest: () -> Unit, // 当我们打算关闭对话框时会执行 properties: DialogProperties = DialogProperties(), // 对话框的属性,用于自定义 content: @Composable () -> Unit // 对话框的内容)
从对话框组件的参数列表来看,参数不多,只有三个,但是实现的内容却不输传统的view,其中content参数允许我们通过传入自己的Composable组件来描述对话框的界面,例如,我们想实现对话框Dialog的宽度不受限制,达到全屏的效果,代码如下:
@OptIn(ExperimentalComposeUiApi::class) @Composable fun FullDialog() { Dialog( onDismissRequest = { }, properties = DialogProperties(usePlatformDefaultWidth = false) ) { Surface(modifier = Modifier.fillMaxSize(), color = Color.Gray) { Text(text = "Hello World") } } }
properties 参数用于定制一些对话框特有的行为:
@Immutableclass DialogProperties @ExperimentalComposeUiApi constructor( val dismissOnBackPress: Boolean = true, // 是否可以在按下系统返回键的时候取消对话框 val dismissOnClickOutside: Boolean = true,// 是否可以点击对话框以外的区域取消对话框 val securePolicy: SecureFlagPolicy = SecureFlagPolicy.Inherit, @Suppress("EXPERIMENTAL_ANNOTATION_ON_WRONG_TARGET") @get:ExperimentalComposeUiApi val usePlatformDefaultWidth: Boolean = true // 对话框的内容是否需要限制在平台默认的范围之内)
需要注意的是,Compose的对话框不像传统视图的对话框那样,可以通过show(),dismiss()等命令的方式显示或者隐藏,它像不同的Compose组件一样,显示与否需要看是否在重组中被执行,也就是说在Comopose中对话框的显示或者隐藏要看状态的控制,Dialog和普通组件的不同之处在于对话框底层需要依赖独立的Window显示
下面我们看下如何使用状态控制对话框的显示和隐藏:
@Composable fun DialogDemo(){ val openDialog = remember { mutableStateOf(true) } val dialogWidth = 200.dp val dialogHeight = 50.dp if(openDialog.value){ Dialog(onDismissRequest = { openDialog.value = false }) { Box(modifier = Modifier .size(dialogWidth, dialogHeight) .background(Color.White)){ Text(text = "Hello World") } } } }
运行结果如下:
在Dialog组件显示的过程中,当点击对话框以外的区域时,onDismissRequest会触发执行,修改openDialog状态为false,从而触发DialogDemo重组,此时判断openDialog为false,Dialog无法被执行,对话框消失。
我们接下来再看下一个警告对话框应该怎么做,警告对话框(Alertdialog)组件是比Dialog组件更高级别的封装,遵循Material Design设计标准。它帮我们定好了,内容文本以及按钮的位置,我们只需要提供相应的内容即可,下面演示如何使用AlertDialog
@Composable fun AlertDialogDemo() { val openDialog = remember { mutableStateOf(true) } if(openDialog.value){ AlertDialog(onDismissRequest = { openDialog.value = false }, title = { Text(text = "开启位置服务") }, text = { Text(text = "这将意味着我们会给您提供精确的位置信息") }, confirmButton = { TextButton(onClick = { openDialog.value = false}) { Text(text = "同意") } }, dismissButton = { TextButton(onClick = { openDialog.value = false}) { Text(text = "取消") } }) } }
运行结果:
2.进度条
Compose自带了两种material Design进度条,分别是圆形进度条和直线进度条,他们都有两种状态,一种是无限加载的,另一种是根据值来动态显示的,我们就以一个圆形的进度条来演示Compose中进度条的使用吧,代码如下:
@Composable fun ProgressBarDemo() { var progress by remember { mutableStateOf(0.1f) } val animatedProgress by animateFloatAsState(targetValue = progress, animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec) Column { CircularProgressIndicator(progress = animatedProgress) Spacer(modifier = Modifier.requiredHeight(30.dp)) OutlinedButton(onClick = { if (progress < 1f) progress += 0.1f}) { Text(text = "增加进度") } } }
运行结果如下:
如上面代码所示,当我们点击一次按钮时,进度就会增加10%,当不设置progress时,就是无限加载的进度条,另外,还有一种时直线进度条(LinearProgressIndicator),使用方法和圆形进度条完全一致
到此,关于“Jetpack Compose怎么实现对话框和进度条”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!