Flutter入门（42）：Flutter 组件之进度条（LinearProgressIndicator、CircularProgressIndicator）详解

1. 基本介绍

LinearProgressIndicator、CircularProgressIndicator 是 flutter 提供的一个线性和圆形进度条。

ProgressIndicator.png

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

LinearProgressIndicator 属性	介绍
value	当前进度，0 ~ 1
backgroundColor	进度条背景色
valueColor	Animation 进度条当前进度颜色，使用不变的颜色可以使用 AlwaysStoppedAnimation(Colors.red)
minHeight	最小宽度，默认为 4.0
semanticsLabel	语义标签
semanticsValue	语义Value

CircularProgressIndicator 属性	介绍
value	当前进度，0 ~ 1
backgroundColor	进度条背景色
valueColor	Animation 进度条当前进度颜色，使用不变的颜色可以使用 AlwaysStoppedAnimation(Colors.red)
strokeWidth	最小宽度，默认为 4.0
semanticsLabel	语义标签
semanticsValue	语义Value

4. LinearProgressIndicator、CircularProgressIndicator 进度条详解

import 'dart:async';

import 'package:flutter/material.dart';

class FMLinearProgressIndicatorVC extends StatefulWidget {
  @override
  FMLinearProgressIndicatorState createState() => FMLinearProgressIndicatorState();
}

class FMLinearProgressIndicatorState extends State  {

  double _count = 0;
  Timer _timer;

  @override
  void initState(){
    super.initState();

    initTimer();
  }

  void initTimer(){
    // 一直轮播的定时器
    _timer = Timer.periodic(Duration(milliseconds: 10), (timer) {
      _count += 0.1;
      if (_count > 100) { _count = 0; }
      setState(() {

      });
    });
  }

  @override
  void dispose(){
    // 页面销毁时一定要 cancel 掉定时器，不然会一直执行
    _timer?.cancel();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("LinearProgressIndicator"),),
      body: _column(),
    );
  }

  Column _column(){
    return Column(
      children: [
        Padding(padding: EdgeInsets.all(20), child: Text("一直动的进度条"),),
        LinearProgressIndicator(),
        Padding(padding: EdgeInsets.all(20)),
        Container(
          width: 100,
          height: 100,
          child: CircularProgressIndicator(),
        ),
        Padding(padding: EdgeInsets.all(20), child: Text("自定义样式与进度的进度条"),),
        _linearProgressIndicator(),
        Padding(padding: EdgeInsets.all(20)),
        Container(
          width: 100,
          height: 100,
          child: _circularProgressIndicator(),
        ),
      ],
    );
  }

  LinearProgressIndicator _linearProgressIndicator(){
    return LinearProgressIndicator(
      value: _count/100.0, // 当前进度
      backgroundColor: Colors.yellow, // 进度条背景色
      valueColor: AlwaysStoppedAnimation(Colors.red), // 进度条当前进度颜色
      minHeight: 10, // 最小宽度
    );
  }

  CircularProgressIndicator _circularProgressIndicator(){
    return CircularProgressIndicator(
      value: _count/100.0, // 当前进度
      strokeWidth: 10, // 最小宽度
      backgroundColor: Colors.yellow, // 进度条背景色
      valueColor: AlwaysStoppedAnimation(Colors.red), // 进度条当前进度颜色
    );
  }
}

ProgressIndicator.gif

5. 技术小结

• 进度条自定义颜色，demo 中已经提供了自定义颜色。
• 自定义进度，demo 中已经用定时器做了一个简单的匀速前进的进度条。