Jetpack Compose —— ProgressBar

news2024/9/28 11:21:37

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)
    }
}