在上一篇文章:Flutter進階—實現動畫效果(二)的最后,我們實現了一個控件,其中包含各種布局和狀態處理控件。以及使用自定義的動畫感知繪圖代碼繪制單個Bar的控件。還有一個浮動按鈕控件,用于啟動條形圖高度的動畫變化。
現在開始向我們的單個條形添加顏色,在Bar類的height字段下添加一個color字段,并且更新Bar.lerp以使其兩者兼容。在上一篇文章中,介紹過“lerp”是“線性內插”或“線性插值”的一種簡短形式。
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) ); }}
要在我們的應用程序中使用彩色條形,需要更新BarChartPainter以從Bar獲取條形顏色。
class BarChartPainter extends CustomPainter { // ... @override void paint(Canvas canvas, Size size) { final bar = animation.value; final paint = new Paint() // 從Bar獲取條形顏色 ..color = bar.color ..style = PaintingStyle.fill; // ... // ... }
在main.dart同級目錄下新建color_palette.dart文件,用于獲取顏色。
import 'package:flutter/material.dart';import 'dart:math';class ColorPalette { static final ColorPalette primary = new ColorPalette(<Color>[ Colors.blue[400], Colors.red[400], Colors.green[400], Colors.yellow[400], Colors.purple[400], Colors.orange[400], Colors.teal[400], ]); ColorPalette(List<Color> colors) : _colors = colors { // bool isNotEmpty:如果此集合中至少有一個元素,則返回true assert(colors.isNotEmpty); } final List<Color> _colors; Color operator [](int index) => _colors[index % length]; // 返回集合中的元素數量 int get length => _colors.length; /* int nextInt( int max ) 生成一個非負隨機整數,范圍從0到max(包括max) */ Color random(Random random) => this[random.nextInt(length)];}
我們將把Bar.empty和Bar.random工廠構造函數放在Bar上。
class Bar { Bar(this.height, this.color); final double height; final Color color; factory Bar.empty() => new Bar(0.0, Colors.transparent); factory Bar.random(Random random) { return new Bar( random.nextDouble() * 100.0, ColorPalette.primary.random(random) ); } 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) ); }}
在main.dart中,我們需要創建一個空的Bar和一個隨機的Bar。我們將為前者使用完全透明的顏色,后者將使用隨機顏色。
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin { // ... @override void initState() { // ... tween = new BarTween(new Bar.empty(), new Bar.random(random)); animation.forward(); } // ... void changeData() { setState(() { tween = new BarTween( tween.evaluate(animation), new Bar.random(random), ); animation.forward(from: 0.0); }); } // ...}
現在應用程序的效果如下圖:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答