Flutter控件——常用控件：进度指示器

Posted 2022-06-18 wzj_what_why_how

进度指示器

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