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

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

LinearProgressIndicator

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

 

1

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

​

CircularProgressIndicator

是一个圆形进度条

 

 

1

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

自定义尺寸

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

eg:

 

1

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

 

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