直播app源码，常用控件：进度指示器

直播app源码，常用控件：进度指示器

LinearProgressIndicator

是一个线性、条状的进度条

 

LinearProgressIndicator({
  //value表示当前的进度，取值范围为[0,1]；如果value为null时则指示器会执行一个循环动画（模糊进度）；当value不为null时，指示器为一个具体进度的进度条。
  double value,
  //指示器的背景色。
  Color backgroundColor,
  //指示器的进度条颜色；值得注意的是，该值类型是Animation<Color>，这允许我们对进度条的颜色也可以指定动画。
  //如果我们不需要对进度条颜色执行动画，换言之，我们想对进度条应用一种固定的颜色，此时我们可以通过AlwaysStoppedAnimation来指定
  //eg:valueColor: AlwaysStoppedAnimation(Colors.blue),
  Animation<Color> valueColor,
  ...
})
 

​

CircularProgressIndicator

是一个圆形进度条

 

 

 class CircularProgressIndicator extends ProgressIndicator {
   const CircularProgressIndicator({
     Key? key,
     double? value,
     Color? backgroundColor,
     Color? color,
     Animation<Color?>? valueColor,
     this.strokeWidth = 4.0,
     String? semanticsLabel,
     String? semanticsValue,
   })
 

自定义尺寸

LinearProgressIndicator和CircularProgressIndicator都是取父容器的尺寸作为绘制的边界的。知道了这点，我们便可以通过尺寸限制类Widget，如ConstrainedBox、SizedBox来指定尺寸。

eg:

 

// 线性进度条高度指定为3
SizedBox(
  height: 3,
  child: LinearProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .5,
  ),
),
// 圆形进度条直径指定为100
SizedBox(
  height: 100,
  width: 100,
  child: CircularProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .7,
  ),
),

 

 以上就是 直播app源码，常用控件：进度指示器，更多内容欢迎关注之后的文章