36 Flutter progress进度条

Flutter progress进度条

1属性

Key? key,
double? value,   //0~1的浮点数，用来表示进度多少;如果 value 为 null 或空，则显示一个动画，否则显示一个定值  
Color? backgroundColor, //进度条背景色
Animation<Color?>? valueColor, //进度颜色
this.minHeight, //高度
String? semanticsLabel,
String? semanticsValue,

2.条形无固定值进度条

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("flutter demo")),
            body: LinearProgressIndicatorDemo()));
  }
}

class LinearProgressIndicatorDemo extends StatefulWidget {
  LinearProgressIndicatorDemo({Key key}) : super(key: key);

  @override
  _LinearProgressIndicatorDemoState createState() {
    return _LinearProgressIndicatorDemoState();
  }
}

class _LinearProgressIndicatorDemoState
    extends State<LinearProgressIndicatorDemo> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: SizedBox(
        child: LinearProgressIndicator(
          backgroundColor: Colors.red,
          valueColor: AlwaysStoppedAnimation<Color>(Colors.yellow),
        ),
        height: 8,
        width: 200,
      ),
    );
  }
}

3.圆形无固定值进度条

SizedBox(  
  child: CircularProgressIndicator(),  
  height: 20.0,  
  width: 20.0,  
),

4.条形固定值进度条

new SizedBox(  
  //限制进度条的高度  
  height: 6.0,  
  //限制进度条的宽度  
  width: 100,  
  child: LinearProgressIndicator(  
      //0~1的浮点数，用来表示进度多少;如果 value 为 null 或空，则显示一个动画，否则显示一个定值  
      value: 0.5,  
      //背景颜色  
      backgroundColor: Colors.yellow,  
      //进度颜色  
      valueColor: new AlwaysStoppedAnimation<Color>(Colors.red)),  
), 

5.圆形固定值进度条

//CircularProgressIndicator不具备设置高度的选项，可以使用SizedBox来设置高度与宽度  
new SizedBox(  
  //限制进度条的高度  
  height: 40.0,  
  //限制进度条的宽度  
  width: 40,  
  child: CircularProgressIndicator(  
    //0~1的浮点数，用来表示进度多少;如果 value 为 null 或空，则显示一个动画，否则显示一个定值  
      value: 0.5,  
      //背景颜色  
      backgroundColor: Colors.yellow,  
      //进度颜色  
      valueColor: new AlwaysStoppedAnimation<Color>(Colors.red)),  
),

6.如何封装使用

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

///加载弹框
class ProgressDialog {
  static bool _isShowing = false;

  ///展示
  static void showProgress(BuildContext context,
      {Widget child = const CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.red),)}) {
    if(!_isShowing) {
      _isShowing = true;
      Navigator.push(
        context,
        _PopRoute(
          child: _Progress(
            child: child,
          ),
        ),
      );
    }
  }

  ///隐藏
  static void dismiss(BuildContext context) {
    if (_isShowing) {
      Navigator.of(context).pop();
      _isShowing = false;
    }
  }
}

///Widget
class _Progress extends StatelessWidget {
  final Widget child;

  _Progress({
    Key key,
    @required this.child,
  })  : assert(child != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
        color: Colors.transparent,
        child: Center(
          child: child,
        ));
  }
}

///Route
class _PopRoute extends PopupRoute {
  final Duration _duration = Duration(milliseconds: 300);
  Widget child;

  _PopRoute({@required this.child});

  @override
  Color get barrierColor => null;

  @override
  bool get barrierDismissible => true;

  @override
  String get barrierLabel => null;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return child;
  }

  @override
  Duration get transitionDuration => _duration;
}

使用的时候只需要调用ProgressDialog.showProgress(context)即可展示进度框，调用ProgressDialog.dismiss(context)隐藏进度框，为了避免多次重复调用，我们新增了一个_isShowing 变量

7.三方控件

—————— https://github.com/jogboms/flutter_spinkit

参考：

https://blog.csdn.net/zl18603543572/article/details/94581899