【Flutter学习笔记】9.6 动画切换组件（AnimatedSwitcher）

参考资料：《Flutter实战·第二版》9.6 动画切换组件（AnimatedSwitcher）

---

9.6.1 AnimatedSwitcher

AnimatedSwitcher 可以同时对其新、旧子元素添加显示、隐藏动画，在需要切换新旧元素的场景广泛使用。也就是说在AnimatedSwitcher的子元素发生变化时，会对其旧元素和新元素做动画。这里的子元素“发生变化”指的就是child widget的类型或者key发生了改变，则旧的child会执行隐藏动画，而新的child会执行显示动画。下面是AnimatedSwitcher 的定义：

const AnimatedSwitcher({
   
  Key? key,
  this.child,
  required this.duration, // 新child显示动画时长
  this.reverseDuration,// 旧child隐藏的动画时长
  this.switchInCurve = Curves.linear, // 新child显示的动画曲线
  this.switchOutCurve = Curves.linear,// 旧child隐藏的动画曲线
  this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder, // 动画构建器
  this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder, //布局构建器
})

假设现在有动画执行曲线A（switchOutCurve）和B（switchInCurve）【这里要仅定义动画播放的时间控制形式，例如加速、减速或者子弹时间等效果，并不决定动画的类型】，默认为线性，分别对应旧child和新child，其中animation的定义在transitionBuilder当中。AnimatedSwitcher的默认值是AnimatedSwitcher.defaultTransitionBuilder，其默认返回的是FadeTransition，也就是渐显渐隐动画【很可能是透明度发生改变的动画】。该builder在AnimatedSwitcher的child切换时会分别对新、旧child绑定动画【这里才决定动画的类型】，旧的child会反向（reverse）执行，新的child会正向（forward）执行。

示例

下面是一个简单计数器的例子，在每一次自增的过程中，旧数字执行缩小动画隐藏，新数字执行放大动画显示：

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
   
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'TEAL WORLD'),
    );
  }
}

class MyHomePage extends StatefulWidget {
   
  const MyHomePage({
   super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
   
  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(
          widget.title,
          style: TextStyle(
              color: Colors.teal.shade800, fontWeight: FontWeight.w900),
        ),
        actions: [
          ElevatedButton(
            child: const Icon(Icons.refresh),
            onPressed: (){
   },
          )
        ],
      ),
      body: const AnimatedSwitcherCounterRoute(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
   },
        tooltip: 'Increment',
        child: Icon(
          Icons.add_box,
          size