Flutter入门（46）：Flutter 组件之 CupertinoActivityIndicator 详解

1. 基本介绍

CupertinoActivityIndicator 是 flutter 提供的 iOS 风格的加载菊花。

CupertinoActivityIndicator.png

安卓风格进度条看这里 -> Flutter入门（42）：Flutter 组件之进度条（LinearProgressIndicator、CircularProgressIndicator）详解

2. 示例代码

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

3. 属性介绍

CupertinoActivityIndicator 属性	介绍
animating	是否有动画，默认为 true
radius	大小，默认为 10

CupertinoActivityIndicator.partiallyRevealed 介绍	介绍
radius	大小，默认为 10
progress	当前进度，默认为 1.0，注意大于1时会报错

4. CupertinoActivityIndicator 详解

import 'dart:async';

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

class FMCupertinoActivityIndicatorVC extends StatefulWidget{
  @override
  FMCupertinoActivityIndicatorState createState() => FMCupertinoActivityIndicatorState();
}

class FMCupertinoActivityIndicatorState extends State {

  Timer _timer;
  double _progress = 0;

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

    _timer = Timer.periodic(Duration(milliseconds: 300), (timer) {
      _progress += 0.1;
      if (_progress > 1) { _progress = 0; }
      setState(() {

      });
    });
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text("CupertinoActivityIndicator"),
      ),
      child: ListView(
        children: [
          Padding(padding: EdgeInsets.all(30)),
          _cupertinoActivityIndicator(true),
          Padding(padding: EdgeInsets.all(30)),
          _cupertinoActivityIndicator(false),
          Padding(padding: EdgeInsets.all(30)),
          _activityIndicator()
        ],
      ),
    );
  }

  CupertinoActivityIndicator _cupertinoActivityIndicator(animating){
    return CupertinoActivityIndicator(
      animating: animating,
      radius: 30,
    );
  }

  CupertinoActivityIndicator _activityIndicator(){
    return CupertinoActivityIndicator.partiallyRevealed(
      radius: 40,
      progress: _progress,
    );
  }
}

CupertinoActivityIndicator.gif

5. 技术小结

CupertinoActivityIndicator 就是一个最简单常见的加载菊花，属性也很少。