Flutter--进度组件LinearProgressIndicator、CircularProgressIndicator和CupertinoActivityIndicator组件

一、LinearProgressIndicator、CircularProgressIndicator和CupertinoActivityIndicator介绍

LinearProgressIndicator：水平进度条

CircularProgressIndicator：是圆形进度条

CupertinoActivityIndicator：是ios风格的进度条

二、LinearProgressIndicator、CircularProgressIndicator和CupertinoActivityIndicator源码

2.1、LinearProgressIndicator的源码介绍

const LinearProgressIndicator({
    Key key,
    double value,//具体进度值
    Color backgroundColor,//背景色
    Animation valueColor,//进度条指示器的颜色值
    this.minHeight,//最小高度
    String semanticsLabel,
    String semanticsValue,
  }) : assert(minHeight == null || minHeight > 0),
       super(
        key: key,
        value: value,
        backgroundColor: backgroundColor,
        valueColor: valueColor,
        semanticsLabel: semanticsLabel,
        semanticsValue: semanticsValue,
      );

2.2、CircularProgressIndicator的源码介绍

const CircularProgressIndicator({
    Key key,
    double value,//具体进度值
    Color backgroundColor,//背景色
    Animation valueColor,//进度条指示器的颜色值
    this.strokeWidth = 4.0,//旋转轨迹的宽度
    String semanticsLabel,
    String semanticsValue,
  }) : super(
         key: key,
         value: value,
         backgroundColor: backgroundColor,
         valueColor: valueColor,
         semanticsLabel: semanticsLabel,
         semanticsValue: semanticsValue,
       );

2.3、CupertinoActivityIndicator的源码介绍

const CupertinoActivityIndicator({
    Key key,
    this.animating = true,//指示器正在是否运行它的动画。
    this.radius = _kDefaultIndicatorRadius,//圆形的半径
    @Deprecated(
      'Leave this field default to use latest style. '
      'This feature was deprecated after v1.21.0-1.0.pre.'
    )
    this.iOSVersionStyle = CupertinoActivityIndicatorIOSVersionStyle.iOS14,
  })  : assert(animating != null),
        assert(radius != null),
        assert(radius > 0.0),
        progress = 1.0,
        super(key: key);

三、LinearProgressIndicator、CircularProgressIndicator和CupertinoActivityIndicator属性介绍

3.1、LinearProgressIndicator的属性介绍

属性	说明
value	具体进度值，取值范围0-1
backgroundColor	背景色
valueColor	进度条指示器的颜色值 AlwaysStoppedAnimation(Colors.red)
minHeight	进度条的高度

3.2、CircularProgressIndicator的属性介绍

属性	说明
strokeWidth	旋转轨迹的宽度
别的属性	见LinearProgressIndicator的属性介绍

3.3、CupertinoActivityIndicator的属性介绍

属性	说明
animating	指示器正在是否运行它的动画
radius	圆形的半径

四、LinearProgressIndicator、CircularProgressIndicator和CupertinoActivityIndicator的demo

4.1、LinearProgressIndicator的demo

class _LinearProgressIndicatorFulState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("LinearProgressIndicator学习"),
          ),
          body: Center(
            child: LinearProgressIndicator(
              value: 0.3,
              minHeight: 20,
              backgroundColor: Colors.grey,
              valueColor: AlwaysStoppedAnimation(Colors.red),
            ),
          )),
    );
  }
}

5e97cb29b05f76cd6bc2c4166f3c2edd.jpg

4.2、CircularProgressIndicator的demo

class _CircularProgressIndicatorFulState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("CircularProgressIndicator学习"),
          ),
          body: Center(
            child: CircularProgressIndicator(
              strokeWidth: 4,
              backgroundColor: Colors.grey,
              valueColor: AlwaysStoppedAnimation(Colors.red),
            ),
          )),
    );
  }
}

2021.01.21.17.53.31.gif

4.3、CupertinoActivityIndicator的demo

class _CupertinoActivityIndicatorFulState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("CupertinoActivityIndicator学习"),
          ),
          body: Center(
            child: CupertinoActivityIndicator(
              animating: true,
              radius: 25,
            ),
          )),
    );
  }
}

2021.01.21.18.03.17.gif