Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(九)
在上一篇文章中,我們實(shí)現(xiàn)了統(tǒng)計(jì)每個(gè)產(chǎn)品和地區(qū)的銷(xiāo)售額,如果現(xiàn)在需要統(tǒng)計(jì)每個(gè)產(chǎn)品和地區(qū)所占市場(chǎng)份額的百分比,那么使用堆疊條形圖是不合適的,我們可以使用分組條形圖,因?yàn)樗梢酝瑫r(shí)在兩個(gè)類(lèi)別維度上進(jìn)行定量比較。分組條形圖的實(shí)際效果如下圖所示:
要實(shí)現(xiàn)上面的效果,我們需要更新bar.dart文件的代碼:
import 'package:flutter/material.dart'; import 'package:flutter/animation.dart'; import 'dart:ui' show lerpDouble; import 'dart:math'; import 'color_palette.dart'; import 'tween.dart'; class BarChart { BarChart(this.groups); final List<BarGroup> groups; factory BarChart.empty(Size size) { return new BarChart(<BarGroup>[]); } factory BarChart.random(Size size, Random random) { const groupWidthFraction = 0.75; const barWidthFraction = 0.9; final groupRanks = _selectRanks(random, 5); final groupCount = groupRanks.length; final groupDistance = size.width / (1+groupCount); final groupWidth = groupDistance * groupWidthFraction; final startX = groupDistance - groupWidth/2; final barRanks = _selectRanks(random, ColorPalette.primary.length ~/ 2); final barCount = barRanks.length; final barDistance = groupWidth / barCount; final barWidth = barDistance * barWidthFraction; final groups = new List.generate( groupCount, (i) { final bars = new List.generate( barCount, (j) => new Bar( barRanks[j], startX + i * groupDistance + j * barDistance, barWidth, random.nextDouble() * size.height, ColorPalette.primary[barRanks[j]], ) ); return new BarGroup( groupRanks[i], bars ); } ); return new BarChart(groups); } static List<int> _selectRanks(Random random, int cap) { final ranks = <int>[]; var rank = 0; while(true) { rank += random.nextInt(2); if(cap <= rank) break; ranks.add(rank); rank++; } return ranks; } } class BarChartTween extends Tween<BarChart> { BarChartTween(BarChart begin, BarChart end) : _groupsTween = new MergeTween<BarGroup>(begin.groups, end.groups), super(begin: begin, end: end); final MergeTween<BarGroup> _groupsTween; @override BarChart lerp(double t) => new BarChart(_groupsTween.lerp(t)); } class BarGroup implements MergeTweenable<BarGroup> { BarGroup(this.rank, this.bars); final int rank; final List<Bar> bars; @override BarGroup get empty => new BarGroup(rank, <Bar>[]); @override bool operator <(BarGroup other) => rank < other.rank; @override Tween<BarGroup> tweenTo(BarGroup other) => new BarGroupTween(this, other); } class BarGroupTween extends Tween<BarGroup> { BarGroupTween(BarGroup begin, BarGroup end) : _barsTween = new MergeTween<Bar>(begin.bars, end.bars), super(begin: begin, end: end) { assert(begin.rank == end.rank); } final MergeTween<Bar> _barsTween; @override BarGroup lerp(double t) => new BarGroup( begin.rank, _barsTween.lerp(t) ); } class Bar extends MergeTweenable<Bar> { Bar(this.rank, this.x, this.width, this.height, this.color); final int rank; final double x; final double width; final double height; final Color color; @override Bar get empty => new Bar(rank, x, 0.0, 0.0, color); @override bool operator <(Bar other) => rank < other.rank; @override Tween<Bar> tweenTo(Bar other) => new BarTween(this, other); static Bar lerp(Bar begin, Bar end, double t) { assert(begin.rank == end.rank); return new Bar( begin.rank, lerpDouble(begin.x, end.x, t), lerpDouble(begin.width, end.width, t), 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) { assert(begin.rank == end.rank); } @override Bar lerp(double t) => Bar.lerp(begin, end, t); } class BarChartPainter extends CustomPainter { BarChartPainter(Animation<BarChart> animation) : animation = animation, super(repaint: animation); final Animation<BarChart> animation; @override void paint(Canvas canvas, Size size) { final paint = new Paint()..style = PaintingStyle.fill; final chart = animation.value; for(final stack in chart.groups) { for(final bar in stack.bars) { paint.color = bar.color; canvas.drawRect( new Rect.fromLTWH( bar.x, size.height - bar.height, bar.width, bar.height ), paint, ); } } } @override bool shouldRepaint(BarChartPainter old) => false; }
接著學(xué)習(xí)下一篇:Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(十)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(一)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(二)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(十)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(三)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(五)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(四)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(八)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(七)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(六)
- Flutter實(shí)戰(zhàn)教程之酷炫的開(kāi)關(guān)動(dòng)畫(huà)效果
相關(guān)文章
Flutter學(xué)習(xí)之實(shí)現(xiàn)自定義themes詳解
一般情況下我們?cè)趂lutter中搭建的app基本上都是用的是MaterialApp這種設(shè)計(jì)模式,MaterialApp中為我們接下來(lái)使用的按鈕,菜單等提供了統(tǒng)一的樣式,那么這種樣式能不能進(jìn)行修改或者自定義呢?答案是肯定的,一起來(lái)看看吧2023-03-03Kotlin開(kāi)發(fā)實(shí)戰(zhàn)之hello world
這篇文章主要為大家詳細(xì)介紹了Kotlin開(kāi)發(fā)實(shí)戰(zhàn)之hello world的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05Android實(shí)現(xiàn)儀表盤(pán)控件開(kāi)發(fā)
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)儀表盤(pán)控件開(kāi)發(fā),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05Android中對(duì)RecyclerView Adapter封裝解析
本篇文章主要介紹了Android中對(duì)RecyclerView Adapter封裝解析。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06Android Caused by: java.lang.ClassNotFoundException解決辦法
這篇文章主要介紹了Android Caused by: java.lang.ClassNotFoundException解決辦法的相關(guān)資料,需要的朋友可以參考下2017-03-03詳解Android Activity之間切換傳遞數(shù)據(jù)的方法
這篇文章主要介紹了詳解Android Activity之間切換傳遞數(shù)據(jù)的方法 的相關(guān)資料,需要的朋友可以參考下2016-04-04android編程實(shí)現(xiàn)圖片庫(kù)的封裝方法
這篇文章主要介紹了android編程實(shí)現(xiàn)圖片庫(kù)的封裝方法,涉及Android針對(duì)圖片的下載、保存、獲取及操作緩存圖片等相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11