Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(九)
在上一篇文章中,我們實(shí)現(xiàn)了統(tǒng)計(jì)每個(gè)產(chǎn)品和地區(qū)的銷售額,如果現(xiàn)在需要統(tǒng)計(jì)每個(gè)產(chǎn)品和地區(qū)所占市場(chǎng)份額的百分比,那么使用堆疊條形圖是不合適的,我們可以使用分組條形圖,因?yàn)樗梢酝瑫r(shí)在兩個(gè)類別維度上進(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)畫效果(十)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(一)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(二)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(十)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(三)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(五)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(四)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(八)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(七)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(六)
- Flutter實(shí)戰(zhàn)教程之酷炫的開關(guān)動(dòng)畫效果
相關(guān)文章
Android 通過TCP協(xié)議上傳指定目錄文件的方法
這篇文章主要介紹了Android 通過TCP協(xié)議上傳指定目錄文件的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
獲取控件大小和設(shè)置調(diào)整控件的位置XY示例
我需要的設(shè)置控件相對(duì)屏幕左上角的X 、Y位置,而不是自己本身位置的偏移,下面與大家介紹下怎么獲取設(shè)置控件的信息2013-06-06
android listview優(yōu)化幾種寫法詳細(xì)介紹
這篇文章只是總結(jié)下getView里面優(yōu)化視圖的幾種寫法,需要的朋友可以參考下2012-11-11
Android自定義View實(shí)現(xiàn)shape圖形繪制
這篇文章主要為大家詳細(xì)介紹了Android使用自定義View實(shí)現(xiàn)shape圖形繪制,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
Android如何在root設(shè)備上開啟ViewServer詳解
這篇文章主要給大家介紹了關(guān)于Android中如何在root設(shè)備上開啟ViewServer的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)各位Android開發(fā)者具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-12-12
Android開發(fā)之拼音轉(zhuǎn)換工具類PinyinUtils示例
這篇文章主要介紹了Android開發(fā)之拼音轉(zhuǎn)換工具類PinyinUtils,涉及Android基于pinyin4j-2.5.0.jar包文件實(shí)現(xiàn)漢字轉(zhuǎn)拼音功能的相關(guān)操作技巧,需要的朋友可以參考下2017-11-11

