在上一篇文章:Flutter进阶—实现动画效果(三)中,实现了一个随机高度、颜色的条形。这一篇文章我们会实现多个条形,同样是随机高度、颜色。
首先在bar.dart中创建BarChart类,并使用固定长度的Bar实例列表。我们将使用5个条形,表示一周的5个工作日。然后,我们需要将创建空白和随机实例的责任从Bar转移到BarChart。
import 'package:flutter/material.dart'; import 'package:flutter/animation.dart'; import 'dart:ui' show lerpDouble; import 'dart:math'; import 'color_palette.dart'; class BarChart { static const int barCount = 5; final List<Bar> bars; BarChart(this.bars) { assert(bars.length == barCount); } factory BarChart.empty() { return new BarChart( /* List.filled( int length, E fill, { bool growable: false } ) 创建给定长度的固定长度列表,并用fill在每个位置初始化值 length必须是非负整数 */ new List.filled( barCount, new Bar(0.0, Colors.transparent) ) ); } factory BarChart.random(Random random) { final Color color = ColorPalette.primary.random(random); return new BarChart( /* List.generate( int length, E generator( int index ), { bool growable: true } ) 创建给定长度的固定长度列表,并用generator创建的值在每个位置初始化值 创建的列表是固定长度,除非growable为true */ new List.generate( barCount, (i) => new Bar( random.nextDouble()*100.0, color ) ) ); } static BarChart lerp(BarChart begin, BarChart end, double t) { return new BarChart( new List.generate( barCount, (i) => Bar.lerp(begin.bars[i], end.bars[i], t) ) ); } } class BarChartTween extends Tween<BarChart> { BarChartTween(BarChart begin, BarChart end) : super(begin: begin, end: end); @override BarChart lerp(double t) => BarChart.lerp(begin, end, t); } class Bar { Bar(this.height, this.color); final double height; final Color color; static Bar lerp(Bar begin, Bar end, double t) { return new Bar( lerpDouble(begin.height, end.height, t), Color.lerp(begin.color, end.color, t) ); } } class BarTween extends Tween<Bar> { BarTween(Bar begin, Bar end) : super(begin: begin, end: end); @override Bar lerp(double t) => Bar.lerp(begin, end, t); } class BarChartPainter extends CustomPainter { static const barWidthFraction = 0.75; BarChartPainter(Animation<BarChart> animation) : animation = animation, super(repaint: animation); final Animation<BarChart> animation; @override void paint(Canvas canvas, Size size) { void drawBar(Bar bar, double x, double width, Paint paint) { paint.color = bar.color; canvas.drawRect( new Rect.fromLTWH( x, size.height-bar.height, width, bar.height ), paint ); } /* Paint:Canvas绘制时使用的样式说明 style:是否绘制内部的形状、形状的边缘或两者都有,默认为PaintingStyle.fill */ final paint = new Paint()..style = PaintingStyle.fill; final chart = animation.value; // 每个条形占用的空间宽度 final barDistance = size.width/(1+chart.bars.length); // 每个条形占用空间75%的宽度 final barWidth = barDistance*barWidthFraction; // 用于计算每个条形的x坐标点 var x = barDistance-barWidth/2; for (final bar in chart.bars) { drawBar(bar, x, barWidth, paint); x += barDistance; } } @override bool shouldRepaint(BarChartPainter old) => false; }
BarChartPainter在条形之间均匀分配可用宽度,并使每个条形占用可用宽度的75%。接下来我们要更新main.dart,用BarChart、BarChartTween替换Bar、BarTween。
// ... class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin { final random = new Random(); AnimationController animation; BarChartTween tween; @override void initState() { super.initState(); animation = new AnimationController( duration: const Duration(milliseconds: 300), vsync: this ); tween = new BarChartTween(new BarChart.empty(), new BarChart.random(random)); animation.forward(); } @override void dispose() { animation.dispose(); super.dispose(); } void changeData() { setState(() { tween = new BarChartTween( tween.evaluate(animation), new BarChart.random(random), ); animation.forward(from: 0.0); }); } @override Widget build(BuildContext context) { return new Scaffold( body: new Center( child: new CustomPaint( size: new Size(200.0, 100.0), painter: new BarChartPainter(tween.animate(animation)) ) ), floatingActionButton: new FloatingActionButton( onPressed: changeData, child: new Icon(Icons.refresh), ), ); } }
现在应用程序的效果如下图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持找一找教程网。