Flutter - 动画条形图

作者: 开心人开发世界 | 来源:发表于2019-11-11 14:56 被阅读0次

Flutter团队目前开始播放有关动画的视频系列。由于它没有涵盖第三方动画库，因此我想分享一个使用“ 简单动画”包创建的示例。

我们要制作一个条形图的动画，其中每个条形分别设置动画。这些条以相同的速度生长。这意味着每个动画都有不同的动画持续时间。

我们首先创建一个小部件Bar。它带有两个参数：

height条形的相对值（0.0和之间的值1.0）
label下面显示的文字

然后我们定义两个常量：

_baseDurationMs一个高度条1.0进行动画处理的时间
_maxElementHeight 具有高度的条形的像素值 1.0

看起来像这样：

class Bar extends StatelessWidget {
  final double height;
  final String label;

  final int _baseDurationMs = 1000;
  final double _maxElementHeight = 100;

  Bar(this.height, this.label);

  @override
  Widget build(BuildContext context) {
    // TODO
  }
}

bar_chart_1.dart

现在我们可以编写渲染函数。它返回一个ControlledAnimation来自“ 简单动画”包的窗口小部件。它可以简单地从动画开始。它包含三个参数：

duration（在这里我们乘height用_baseDurationMs得到的所有条形图速度相同）
tween（从动画中的值0.0，以我们的height）
builder函数，可在每个动画步骤中渲染条形（我们将“当前动画值”作为第二个参数传入）

对于此演示，使用了非常简单的布局。这是一列带有“empty space”-container的列，其后是“blue-colored container”和标签。

看一看：

class Bar extends StatelessWidget {
 // ...

  @override
  Widget build(BuildContext context) {
    return ControlledAnimation(
      duration: Duration(milliseconds: (height * _baseDurationMs).round()),
      tween: Tween(begin: 0.0, end: height),
      builder: (context, animatedHeight) {
        return Column(
          children: <Widget>[
            Container(
              height: (1 - animatedHeight) * _maxElementHeight,
            ),
            Container(
              width: 20,
              height: animatedHeight * _maxElementHeight,
              color: Colors.blue,
            ),
            Text(label)
          ],
        );
      },
    );
  }
}

bar_chart_2.dart

我们有一个动画Bar。现在，我们可以通过将一些Bar小部件放在一行中来完成此示例：

class BarChartApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Bar(0.3, "2013"),
          Bar(0.5, "2014"),
          Bar(0.7, "2015"),
          Bar(0.8, "2016"),
          Bar(0.9, "2017"),
          Bar(0.98, "2018"),
          Bar(0.84, "2019"),
        ],
      ),
    );
  }
}

bar_chart_3.dart

现在，我们有了这个动画效果很好的条形图。（当然，您可以改善条形图的外观。我希望此示例保持简单。）