flutter学习之进度条

本文主要介绍下flutter中进度条的使用

LinearProgressIndicator

LinearProgressIndicator线性进度指示器，也称为进度条。继承ProgressIndicator

const LinearProgressIndicator({
  Key? key,
  double? value,
  Color? backgroundColor,
  Color? color,
  Animation<Color?>? valueColor,
  this.minHeight,
  String? semanticsLabel,
  String? semanticsValue,
}) 

水平进度指示器，基本用法如下

Scaffold(
  appBar: AppBar(title: Text('Indicator'),),
  body:LinearProgressIndicator(),
  floatingActionButton: FloatingActionButton(
    child: const Icon(Icons.navigate_next),
    onPressed: () {
    },),
);

效果如下：

通过value设置具体

LinearProgressIndicator(
  value: 0.4,
)

value的值范围是0-1，效果如下：

设置背景颜色及进度值：

const LinearProgressIndicator(
  value: 0.4,
    backgroundColor: Colors.yellowAccent,
    valueColor: AlwaysStoppedAnimation<Color>(Colors.black)
)

效果如下：

CircularProgressIndicator

CircularProgressIndicator 是圆形进度条，和LinearProgressIndicator用法一样：

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

简单使用：

CircularProgressIndicator()

效果如下：

设置进度值及颜色值：

CircularProgressIndicator(
  value: 0.3,
  backgroundColor: Colors.blue,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.redAccent),
)

效果如下图所示：

CupertinoActivityIndicator

CupertinoActivityIndicator是我们iOS中加载风格的指示器，CupertinoActivityIndicator不能设置进度，只能一直转“菊花”

const CupertinoActivityIndicator({
  Key? key,
  this.color,
  this.animating = true,
  this.radius = _kDefaultIndicatorRadius,
}) 

使用默认

CupertinoActivityIndicator()

效果如下：

radius参数是半径，值越大，控件越大。

 CupertinoActivityIndicator(
  radius: 60,
  color: Colors.redAccent,
)

效果如下：

flutter_progress_hud

覆盖加载屏幕显示一个进度指示器，也称为模态进度 HUD 或平视显示，这通常意味着应用程序正在加载或执行一些工作。 我们也可以使用一些三方的加载flutter_progress_hud:

ProgressHUD(
  borderColor:Colors.orange,
  backgroundColor:Colors.blue.,
  child:Builder(
    builder:(context)=>Container(
      height:DeviceSize.height(context),
      width:DeviceSize.width(context),
      padding:EdgeInsets.only(left:20,right:20,top:20),
    ),
  ),
),

我们也可以根据context 初始化

final progress = ProgressHUD.of(context);

show

progress.show();

添加提示语

progress.showWithText('Loading...');

消失

progress.dismiss();