Flutter CircularProgressIndicator


简介

循环进度条,旋转表示进度

  • 有两种线性进度条:确定和不确定。
  • 确定:确定进度条在每个时间点都有一个特定的值,并且该值应该是0.0递增到1.0。
  • 不确定:不确定的进度条在每一个时间点都没有特定到值。只是表明此时取得的进度,没有表明多少未完成。

基本用法

  • 创建确定进度条,需要使用介于0.0和1.0的非空值
  • 要创建不确定的进度条,需要使用空值

实例演示

import 'package:flutter/material.dart';

class CircularDemo extends StatefulWidget {
  @override
  _CircularDemoState createState() => _CircularDemoState();
}

class _CircularDemoState extends State<CircularDemo> {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        SizedBox(
          height: 20,
          width: 20,
          child: CircularProgressIndicator(
            backgroundColor: Colors.red,
          ),
        ),
        SizedBox(
          height: 30,
          width: 30,
          child: CircularProgressIndicator(
            backgroundColor: Colors.red,
          ),
        ),
        CircularProgressIndicator(
          backgroundColor: Colors.redAccent,
        ),
        SizedBox(
          height: 50,
          width: 50,
          child: CircularProgressIndicator(
            backgroundColor: Colors.red,
          ),
        ),
      ],
    );
  }
}