overview
The dialog box and the progress bar are actually not very related. They are written together because the content of the two is not much, so they are put together. The dialog box is a component that we usually develop and use more, such as privacy authorization, and the user clicks to delete The user is reminded that this is a dangerous operation, etc., and the frequency of use of the progress bar is also very high. For example, the progress bar can be used when downloading files, uploading files, and processing tasks, so that users know that the system is still running and has not crashed. This article will introduce how to use dialogs and progress bars in Compose
Example analysis
1. Dialog Dialog
First of all, we can first look at the parameter list of the dialog box in Compose
@Composable
fun Dialog(
onDismissRequest: () -> Unit, // 当我们打算关闭对话框时会执行
properties: DialogProperties = DialogProperties(), // 对话框的属性，用于自定义
content: @Composable () -> Unit // 对话框的内容
)
Judging from the parameter list of the dialog component, there are not many parameters, only three, but the implemented content is not inferior to the traditional view. The content parameter allows us to describe the interface of the dialog box by passing in our own Composable component, for example, We want to realize that the width of the dialog box Dialog is not limited, so as to achieve the effect of full screen, the code is as follows:
@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun FullDialog() {
Dialog(
onDismissRequest = {
/*TODO*/ },
properties = DialogProperties(usePlatformDefaultWidth = false)
) {
Surface(modifier = Modifier.fillMaxSize(), color = Color.Gray) {
Text(text = "Hello World")
}
}
}
The properties parameter is used to customize some dialog-specific behaviors:
@Immutable
class 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显示
Let's see how to use the state to control the display and hiding of the dialog box:
@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")
}
}
}
}
The result of the operation is as follows:
During the display of the Dialog component, when clicking on an area other than the dialog box, onDismissRequest will trigger execution, modify the state of openDialog to false, and thus trigger the reorganization of DialogDemo. At this time, it is judged that openDialog is false, Dialog cannot be executed, and the dialog box disappears.
Next, let's look at how to do the next alert dialog. The Alertdialog component is a higher-level package than the Dialog component and follows the Material Design design standard. It helps us set the title, content text and the position of the button. We only need to provide the corresponding content. The following demonstrates how to use 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 = "取消")
}
})
}
}
operation result:
2. Progress bar
Compose comes with two kinds of material design progress bars, namely circular progress bar and straight line progress bar. They have two states, one is infinitely loaded, and the other is dynamically displayed according to the value. We use A circular progress bar to demonstrate the use of the progress bar in Compose, the code is as follows:
@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 = "增加进度")
}
}
}
The running results are as follows:
As shown in the above code, when we click the button once, the progress will increase by 10%. When the progress is not set, it will be an infinite loading progress bar. In addition, there is also a linear progress bar (LinearProgressIndicator), The method of use is exactly the same as that of the circular progress bar
Summarize
The dialog components and progress bar components introduced in this article are frequently used components in the development process. It is recommended that readers do more exercises, and then try to customize some dialog boxes and progress bars. Complete more dazzling and cool effects.