Flutter开发之——ProgressIndicator

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

本文介绍几种进度条组件：

  • LinearProgressIndicator：水平进度指示器
  • CircularProgressIndicator ：圆形进度条
  • CupertinoActivityIndicator：ios风格的指示器，不能设置进度，只能一直转“菊花”
  • RefreshProgressIndicator ：刷新指示器，通常用于下拉刷新

二 LinearProgressIndicator

2.1 说明

  • 水平进度指示器
  • value的值范围是0-1
  • value未设置值前是动态的，设置后，为固定值

2.2 构造方法

1
2
3
4
5
6
7
8
9
const LinearProgressIndicator({
   Key? key,
   double? value,
   Color? backgroundColor,
   Animation<Color?>? valueColor,
   this.minHeight,
   String? semanticsLabel,
   String? semanticsValue,
 })

2.3 示例

代码

1
2
3
4
5
LinearProgressIndicator(
              value: 0.3,
              backgroundColor: Colors.greenAccent,
              valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
            )

效果图

三 CircularProgressIndicator

3.1 说明

  • CircularProgressIndicator 是圆形进度条
  • value的值范围是0-1
  • value未设置值前是动态的，设置后，为固定值

3.2 构造函数

1
2
3
4
5
6
7
8
9
const CircularProgressIndicator({
   Key? key,
   double? value,
   Color? backgroundColor,
   Animation<Color?>? valueColor,
   this.strokeWidth = 4.0,
   String? semanticsLabel,
   String? semanticsValue,
 })

3.3 示例

代码

1
2
3
4
5
CircularProgressIndicator(
             value: 0.3,
             backgroundColor: Colors.greenAccent,
             valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
           ),

效果图

四 CupertinoActivityIndicator

4.1 说明

  • CupertinoActivityIndicator是ios风格的指示器
  • CupertinoActivityIndicator不能设置进度，只能一直转“菊花”
  • radius参数是半径，值越大，控件越大

4.2 构造函数

1
2
3
4
5
const CupertinoActivityIndicator({
   Key? key,
   this.animating = true,
   this.radius = _kDefaultIndicatorRadius,
 })

4.3 示例

代码

1
2
3
CupertinoActivityIndicator(
             radius: 10,
           )

效果图

五 RefreshProgressIndicator

5.1 说明

RefreshProgressIndicator 是刷新指示器，通常用于下拉刷新

5.2 构造函数

1
2
3
4
5
6
7
8
9
const RefreshProgressIndicator({
    Key? key,
    double? value,
    Color? backgroundColor,
    Animation<Color?>? valueColor,
    double strokeWidth = 2.0, // Different default than CircularProgressIndicator.
    String? semanticsLabel,
    String? semanticsValue,
  })

5.3 示例

代码

1
2
3
4
5
RefreshProgressIndicator(
             backgroundColor: Colors.greenAccent,
             valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
             strokeWidth: 5.0,
           )

效果图