携手创作，共同生长！这是我参加「日新计划 8 月更文挑战」的第30天，点击查看活动概况

本文主要介绍下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: () {
    },),
);

作用如下：

flutter学习之进度条

通过value设置详细

LinearProgressIndicator(
  value: 0.4,
)

value的值范围是0-1，作用如下：

flutter学习之进度条
设置布景颜色及进展值：

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

作用如下：

flutter学习之进度条

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

作用如下：

flutter学习之进度条

设置进展值及颜色值：

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

作用如下图所示：

flutter学习之进度条

CupertinoActivityIndicator

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

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

运用默许

CupertinoActivityIndicator()

作用如下：

flutter学习之进度条

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

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

作用如下：

flutter学习之进度条

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();

flutter学习之进度条