Jetpack Compose之进度条介绍(ProgressIndicator) |
您所在的位置：网站首页 › wallpaper如何调进度条 › Jetpack Compose之进度条介绍(ProgressIndicator) |
Jetpack Compose之进度条介绍(ProgressIndicator)
|
JetPack Compose系列（12）—进度条介绍
Compose自带进度条控件有两个，分别是：CircularProgressIndicator（圆形进度条）和LinearProgressIndicator（线性进度条）。 CircularProgressIndicator（圆形进度条）圆形进度条，按照惯例，我们先看看其构造函数： @Composable fun CircularProgressIndicator( modifier: Modifier = Modifier, color: Color = MaterialTheme.colors.primary, strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth ) @Composable fun CircularProgressIndicator( /*@FloatRange(from = 0.0, to = 1.0)*/ progress: Float, modifier: Modifier = Modifier, color: Color = MaterialTheme.colors.primary, strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth )不难看出，两个构造函数唯一区别就是第一个参数的有无。各参数含义如下： · progress：进度条，设置范围是 0.0到1.0。（这个参数不传递赋值的话，进度条就会一直处于滚动状态） · modifier ：修饰符（这个我们有单独文章介绍）。 · color ：进度条指示器颜色（默认是MaterialTheme.colors.primary）。 · strokeWidth：进度条指示器的宽度。 例如如下示例： @Composable fun showProgress(){ Column { CircularProgressIndicator(progress = 0.5f) Spacer(modifier = Modifier.height(20.dp)) CircularProgressIndicator( progress = 0.8f,color = Color.Red ) } }对应的效果为：
需要注意的是，这里CircularProgressIndicator(progress = 0.5f)没有指定颜色，所以显示出来的效果为默认颜色。 LinearProgressIndicator（线性进度条）跟圆形进度条一样，线性进度条也有两个构造函数： @Composable fun LinearProgressIndicator( modifier: Modifier = Modifier, color: Color = MaterialTheme.colors.primary, backgroundColor: Color = color.copy(alpha = IndicatorBackgroundOpacity) ) @Composable fun LinearProgressIndicator( /*@FloatRange(from = 0.0, to = 1.0)*/ progress: Float, modifier: Modifier = Modifier, color: Color = MaterialTheme.colors.primary, backgroundColor: Color = color.copy(alpha = IndicatorBackgroundOpacity) )各参数与圆形进度条参数含义一致。多出来的backgroundColor属性指的是指示器背景颜色。（跟CircularProgressIndicator一样，progress这个参数不传递赋值的话，进度条就会一直处于滚动状态） 示例代码如下： Column { LinearProgressIndicator(color = Color.Red, backgroundColor = Color.Yellow) Spacer(modifier = Modifier.height(20.dp)) LinearProgressIndicator(color = Color.Green, backgroundColor = Color.Blue) Spacer(modifier = Modifier.height(20.dp)) LinearProgressIndicator(progress = 0.8f,color = Color.Green, backgroundColor = Color.Blue) }对应效果为：
可以看到前两个LinearProgressIndicator没有传递进度参数，就一直处于滚动状态。其余使用较简单，这里不做赘述。 当然，以上只是自带进度条的简单使用，很难覆盖真实开发过程中的场景，往往我们需要对其进行自定义。而自定义进度条往往是跟Canvas组件一起使用。这个我们在后面会讲到。 |
【本文地址】
今日新闻 |
推荐新闻 |