LinearProgressIndicator-进度条组件

LinearProgressIndicator

LinearProgressIndicator 直线型进度条
CircularProgressIndicator 圆形进度条
CupertinoActivityIndicator IOS风格进度条

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

LinearProgressIndicator()

效果如下：

image

设置具体进度值：

LinearProgressIndicator(
  value: 0.3,
)

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

image

设置背景颜色及进度值：

LinearProgressIndicator(
  value: 0.3,
  backgroundColor: Colors.greenAccent,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
)

效果如下：

image

#CircularProgressIndicator

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

CircularProgressIndicator()

效果如下：

image

设置进度值及颜色值：

CircularProgressIndicator(
  value: 0.3,
  backgroundColor: Colors.greenAccent,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
)

效果如下：

image

#CupertinoActivityIndicator

CupertinoActivityIndicator是ios风格的指示器，CupertinoActivityIndicator不能设置进度，只能一直转“菊花”。

CupertinoActivityIndicator(
  radius: 10,
)

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

效果如下：

image

代码：

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

class LinearProgressIndicatorDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return LinearProgressIndicatorDemoState();
  }

}


class LinearProgressIndicatorDemoState extends State<LinearProgressIndicatorDemo> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Text("直线型进度条"),
          LinearProgressIndicator(),
          Text("直线型设置进度值: 0.3"),
          LinearProgressIndicator(
            value: 0.3, // 取值范围在 0~1 之间
          ),
          Text("直线型设置进度值：0.3 ，并且设置颜色的进度条"),
          LinearProgressIndicator(
            value: 0.3,
            backgroundColor: Colors.greenAccent, // 进度条背景颜色
            valueColor: AlwaysStoppedAnimation<Color>(Colors.red), // 设置值的颜色
          ),
          Text("圆形进度条"),
          CircularProgressIndicator(),
          Text("圆形进度条设置值：0.3 ,并且设置颜色"),
          CircularProgressIndicator(
            value: 0.3,
            backgroundColor: Colors.greenAccent, // 进度条背景颜色
            valueColor: AlwaysStoppedAnimation<Color>(Colors.red), // 设置值的颜色
          ),
          Text("IOS风格的进度条"),
          CupertinoActivityIndicator(),
          Text("IOS风格的进度条, 设置 radius 半径参数(值越大，控件越大) "),
          CupertinoActivityIndicator(
            radius: 20, // radius参数是半径，值越大，控件越大。
          )
        ],
      ),
    );
  }

}

截屏2021-01-10 下午4.48.00.png