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
的值变化。