Jetpack Compose —— ProgressBar

           Jetpack Compose的ProgressBar是一种用户界面组件，用于向用户展示长时间操作的当前进度。ProgressBar可以有两种形式：线性和环形，这两种形式都可以通过Jetpack Compose轻松实现。

注意：从Jetpack Compose 1.0版本开始，ProgressBar已经被LinearProgressIndicator和CircularProgressIndicator取代，前者用于水平进度条，后者用于圆形进度条。

---

          ProgressBar主要有两个属性：进度和颜色。进度是一个浮点数，范围在0.0（无进度）和1.0（完成）之间。颜色可以通过Material主题颜色来设置。

以下是一个环形ProgressBar的Jetpack Compose实现示例1：

@Preview
@Composable
fun ProgressIndicatorSample(){
    var progress by remember {
        mutableStateOf(0.1f)
    }

    //定时更新进度
    LaunchedEffect(key1 =true){
        while(progress <1f){
            progress += 0.01f
            delay(50)
        }
    }
    //使用CircularProgressIndicator构建环形进度条
    CircularProgressIndicator(progress = progress, strokeWidth = 4.dp)
}

 上述代码将创建一个环形的ProgressBar，其进度由变量progress控制，通过LaunchedEffect协程每50毫秒更新一次。

在Jetpack Compose中，通过改变ProgressBar的进度，颜色和形状，可以根据应用的需求来定制ProgressBar的外观和行为。

案例2：模仿下载

@Preview
@Composable
fun DownloadProgressBar(){
    var downloadProgress by remember{
        mutableStateOf(0f)
    }
    var isDownloading by remember{
        mutableStateOf(false)
    }

    Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center){
        Button(onClick = {
            isDownloading =true
        }){
            Text(text = "开始下载")
        }
        Spacer(modifier = Modifier.height(30.dp))
        if(isDownloading){
            CircularProgressIndicator(progress = downloadProgress, strokeWidth = 4.dp)
            //使用协程模拟下载进度
            LaunchedEffect(key1 = true){
                while (downloadProgress < 1f){
                    downloadProgress += 0.01f
                    delay(100)//伪装下载进度
                }
            }
        }
    }
}

 在这个例子中，当点击按钮时，变量isDownloading被设置为true，并显示CircularProgressIndicator。然后，通过LaunchedEffect协程在一段时间内逐渐增加downloadProgress变量的值，模拟了下载进度。当downloadProgress达到1.0时，下载完成。

案例3：长形进度条

@Preview
@Composable
fun FileDownload(){
    var progress by remember {
        mutableStateOf(0f)
    }
    LaunchedEffect(Unit){
        while (progress<1f){
            progress += 0.01f
            delay(100)
        }
    }
    Column(modifier = Modifier.padding(16.dp)){
        Text(text = "下载进度")
        LinearProgressIndicator(progress = progress, color = MaterialTheme.colors.error)
    }
}

 

在这个示例中，我们创建了一个FileDownload函数，该函数是一个Composable函数，用于定义我们的下载界面。它有一个本地状态progress，用于表示下载进度，其值从0（即没有进度）到1（即100%进度）。

LaunchedEffect是一个Jetpack Compose的内置函数，它用于在应用的生命周期中启动和管理协程。在这个例子中，我们使用LaunchedEffect启动一个协程来模拟文件的下载进度。每隔100毫秒，progress就会增加0.01，模拟文件下载的进度。

最后，我们创建了一个LinearProgressIndicator，这是Jetpack Compose提供的一个用于显示进度条的Composable函数。我们将progress作为其参数传入，因此LinearProgressIndicator的长度会根据progress的值变化。