Jetpack Compose怎么实现对话框和进度条

2023-07-06 05:27

短信预约 -IT技能 免费直播动态提醒

这篇文章主要介绍“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")                }            }        }    }

运行结果如下：

Jetpack Compose怎么实现对话框和进度条

在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 = "取消")                }            })        }    }

运行结果：

Jetpack Compose怎么实现对话框和进度条

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 = "增加进度")            }        }    }

运行结果如下：

Jetpack Compose怎么实现对话框和进度条