欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flutter基础Widget使用----动画图解LinearProgressIndicator和CircularProgressIndicator

程序员文章站 2022-05-30 10:16:10
...

LinearProgressIndicator 和 CircularProgressIndicator 也就是进度条 Widget,前一种为线性进度条,后一种为圆形进度条。

一、LinearProgressIndicator

在 Flutter 中 LinearProgressIndicator 可以实现精确进度和模糊进度。比如等待软件安装完成,我们可以使用一个模糊进度条。它继承自 ProgressIndicator。

  const LinearProgressIndicator({
    Key key,
    double value,
    Color backgroundColor,
    Animation<Color> valueColor,
    String semanticsLabel,
    String semanticsValue,
  })

value ---- 表示当前的进度,取值范围为[0,1];如果value为null时则指示器会执行一个循环动画(模糊进度);当value不为null时,指示器为一个具体进度的进度条。

backgroundColor ---- 背景颜色

valueColor ---- 进度条颜色。该值类型是 Animation,这允许我们对进度条的颜色可以指定动画。如果我们不需要对进度条颜色执行动画,想对进度条应用一种固定的颜色,此时可以通过 AlwaysStoppedAnimation 来指定。

semanticsLabel ---- 可用于标识此进度条的目的,以用于屏幕阅读软件。

semanticsValue ---- 属性可用于确定进度指示器,指示已取得多少进度。

1.1 精确线性进度条

我们设置 value 的值为 0.6。另外加了 SizedBox 限制进度条的宽高。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              SizedBox(
                width: 400,
                height: 10,
                child: LinearProgressIndicator(
                  value: 0.6,
                  backgroundColor: Colors.red,
                  valueColor: AlwaysStoppedAnimation(Colors.blue),
                ),
              ),
            ])
          ],
        ));
  }
}

Flutter基础Widget使用----动画图解LinearProgressIndicator和CircularProgressIndicator

1.2 模糊线性进度条

把 value 设置为 null 就可以实现了。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ......
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              SizedBox(
                width: 400,
                height: 10,
                child: LinearProgressIndicator(
                  value: null,
                  backgroundColor: Colors.red,
                  valueColor: AlwaysStoppedAnimation(Colors.blue),
                ),
              ),
            ])
          ],
        ));
  }
}

下图中第二个动态进度条就是模糊进度效果。
Flutter基础Widget使用----动画图解LinearProgressIndicator和CircularProgressIndicator

二、CircularProgressIndicator

和线性进度条类似只多了一个设置进度条粗细的 Field。同样继承自 ProgressIndicator。

  const CircularProgressIndicator({
    Key key,
    double value,
    Color backgroundColor,
    Animation<Color> valueColor,
    this.strokeWidth = 4.0,
    String semanticsLabel,
    String semanticsValue,
  })

下面是使用代码。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ......
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              SizedBox(
                width: 100,
                height: 100,
                child: CircularProgressIndicator(
                  value: null,
                  backgroundColor: Colors.red,
                  valueColor: AlwaysStoppedAnimation(Colors.blue),
                ),
              ),
            ]),
            SizedBox(
              height: 10,
              child: null,
            ),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              SizedBox(
                width: 100,
                height: 50,
                child: CircularProgressIndicator(
                  value: 0.5,
                  backgroundColor: Colors.red,
                  valueColor: AlwaysStoppedAnimation(Colors.blue),
                ),
              ),
            ])
          ],
        ));
  }
}

代码中最下面两个进度条就是使用圆形进度条了,我们看到当父 Widget SizedBox 宽高不成比例的时候,画出来的圆形进度条就变成了椭圆。
Flutter基础Widget使用----动画图解LinearProgressIndicator和CircularProgressIndicator

二、自定义动画进度条

下面我们打造一个进度条,颜色随着时间推移会从黄色变为蓝色,同时进度走到100%。

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    _animationController =
        new AnimationController(vsync: this, duration: Duration(seconds: 5));
    _animationController.forward();
    _animationController.addListener(() => setState(() => {}));
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ......
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              SizedBox(
                width: 100,
                height: 100,
                child: CircularProgressIndicator(
                  value: _animationController.value,
                  backgroundColor: Colors.red,
                  valueColor: ColorTween(begin: Colors.yellow, end: Colors.blue)
                      .animate(_animationController),
                  strokeWidth: 10,
                ),
              ),
            ])
          ],
        ));
  }
}

Flutter基础Widget使用----动画图解LinearProgressIndicator和CircularProgressIndicator
完整 Demo 代码如下:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    _animationController =
        new AnimationController(vsync: this, duration: Duration(seconds: 5));
    _animationController.forward();
    _animationController.addListener(() => setState(() => {}));
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              SizedBox(
                width: 400,
                height: 10,
                child: LinearProgressIndicator(
                  value: 0.6,
                  backgroundColor: Colors.red,
                  valueColor: AlwaysStoppedAnimation(Colors.blue),
                ),
              ),
            ]),
            SizedBox(
              height: 10,
              child: null,
            ),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              SizedBox(
                width: 400,
                height: 10,
                child: LinearProgressIndicator(
                  value: null,
                  backgroundColor: Colors.red,
                  valueColor: AlwaysStoppedAnimation(Colors.blue),
                ),
              ),
            ]),
            SizedBox(
              height: 10,
              child: null,
            ),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              SizedBox(
                width: 100,
                height: 100,
                child: CircularProgressIndicator(
                  value: null,
                  backgroundColor: Colors.red,
                  valueColor: AlwaysStoppedAnimation(Colors.blue),
                ),
              ),
            ]),
            SizedBox(
              height: 10,
              child: null,
            ),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              SizedBox(
                width: 100,
                height: 50,
                child: CircularProgressIndicator(
                  value: 0.5,
                  backgroundColor: Colors.red,
                  valueColor: AlwaysStoppedAnimation(Colors.blue),
                ),
              ),
            ]),
            SizedBox(
              height: 10,
              child: null,
            ),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              SizedBox(
                width: 100,
                height: 100,
                child: CircularProgressIndicator(
                  value: _animationController.value,
                  backgroundColor: Colors.red,
                  valueColor: ColorTween(begin: Colors.yellow, end: Colors.blue)
                      .animate(_animationController),
                  strokeWidth: 10,
                ),
              ),
            ])
          ],
        ));
  }
}

相关标签: Flutter