Flutter-Notebook 实战：AnimatedCrossFade 实现双 Widget 交叉淡入淡出过渡-平芜编程栈

示例工程
移动开发

【免费下载链接】Flutter-Notebook

FlutterDemo合集，今天你fu了吗

项目地址：https://gitcode.com/gh_mirrors/fl/Flutter-Notebook

AnimatedCrossFade是 Flutter 内置的隐式动画组件，可以在两个不同的 Widget 之间进行平滑的淡化过渡（Cross-Fade），是切换登录/注册表单、占位图与内容图、展开与收起状态等场景的常用方案。本教程以 Flutter-Notebook 仓库中 animated_cross_fade 示例为骨架，完整讲解其四个核心参数的语义、底层过渡原理，并结合 Demo 源码给出可复制运行的实战代码，读完即可在自己的项目中落地使用。

一、AnimatedCrossFade 是什么

按仓库内 README 的原话，AnimatedCrossFade能够让我们在两个不同的 Widget 中进行淡化过渡。它属于 Flutter 的隐式动画（Implicitly Animated Widget）家族：你只需要声明“目标状态”，组件会在内部自行完成从旧状态到新状态的动画插值，无需像显式动画那样手动管理AnimationController。

从框架实现原理看，在过渡动画进行期间，两个 child 会同时参与布局与绘制：淡出的 child 透明度逐渐降低并伴随尺寸收缩，淡入的 child 透明度逐渐升高并占据空间，二者在同一个区域内交叉完成交替，最终只保留目标 child，从而呈现出自然的“交叉淡化”视觉效果。

二、四个核心参数详解

README 明确指出，使用AnimatedCrossFade需要传递四个参数，这也是该组件最核心的配置项：

参数	类型	含义	示例中的取值
`duration`	`Duration`	动画过渡时间	`Duration(seconds: 2)`，即 2 秒
`firstChild`	`Widget`	第一个 child Widget	`FlutterLogo(style: FlutterLogoStyle.horizontal, size: 200.0)`
`secondChild`	`Widget`	第二个 child Widget	`FlutterLogo(style: FlutterLogoStyle.stacked, size: 200.0)`
`crossFadeState`	`CrossFadeState`	切换当前显示的是第一个还是第二个 child	`_first ? CrossFadeState.showFirst : CrossFadeState.showSecond`

其中crossFadeState是一个枚举类型，只包含两个取值：

CrossFadeState.showFirst：显示firstChild；
CrossFadeState.showSecond：显示secondChild。

只要在setState中改变crossFadeState的值，组件就会在duration指定的时间内自动完成两个 child 之间的淡化过渡，开发者不需要关心动画控制器与帧回调。

三、示例效果与 Demo 源码剖析

仓库中的示例完整代码位于 animated_cross_fade_demo.dart，整个 Demo 的核心只有 31 行，结构非常清晰：

import 'package:flutter/material.dart'; class AnimatedCrossFadeDemo extends StatefulWidget { @override _AnimatedCrossFadeDemoState createState() => _AnimatedCrossFadeDemoState(); } class _AnimatedCrossFadeDemoState extends State<AnimatedCrossFadeDemo> { bool _first = false; change(){ setState(() { _first = _first ? false:true; }); } @override Widget build(BuildContext context) { return Center( child: GestureDetector( onTap: change, child: AnimatedCrossFade( duration: const Duration(seconds: 2), firstChild: const FlutterLogo(style: FlutterLogoStyle.horizontal, size: 200.0), secondChild: const FlutterLogo(style: FlutterLogoStyle.stacked, size: 200.0), crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond, ), ), ); } }

这段代码的要点可以拆解为三层：

状态管理：用bool _first记录当前应该显示哪个 child，change()方法通过setState取反切换状态；
交互触发：用GestureDetector的onTap绑定change()，实现“点击屏幕即切换动画”；
动画声明：AnimatedCrossFade根据crossFadeState在firstChild与secondChild之间做淡化过渡。示例特意让两个 child 使用不同的FlutterLogoStyle（horizontal与stacked），这样切换时视觉差异明显，方便观察淡入淡出效果。

应用入口在 main.dart：通过MaterialApp的home: AnimatedCrossFadeDemo()将该 Demo 作为首页，并配合ThemeData.dark()使用深色主题，与上方的运行截图一致。

四、过渡机制与参数进阶

4.1 动画是如何被驱动的

AnimatedCrossFade是ImplicitlyAnimatedWidget的子类，内部自带一个AnimationController。每当crossFadeState变化时，组件会以duration为周期执行一次动画：

进入动画期间，两个 child 均在布局树中保留，通过透明度（Opacity）插值实现“一隐一显”；
同时尺寸（Size）也会插值，避免出现大小突变造成的跳帧感；
动画结束后，不可见的 child 从渲染中移除，界面只保留目标 child。

这意味着firstChild与secondChild需要是独立、各自完整的 Widget，不要依赖对方的存在。

4.2 官方还提供的常用可选参数

除 README 列出的四个必需参数外，AnimatedCrossFade还暴露了以下常用可选配置（来自 Flutter 框架公开 API）：

firstCurve/secondCurve：分别控制两个 child 淡入淡出所使用的动画曲线，默认均为Curves.linear；
sizeCurve：控制尺寸过渡的动画曲线，默认Curves.linear；
reverseDuration：反向过渡（从第二个切回第一个）的时长，默认与duration一致；
layoutBuilder：自定义两个 child 在过渡区域内的布局方式，默认内部使用Stack配合定位实现重叠摆放；
alignment：两个 child 在交叉淡化区域内的对齐方式，默认Alignment.center；
clipBehavior：对过渡区域的裁剪行为。

实际项目中，可以在 Demo 基础上做如下扩展，让过渡更细腻：

AnimatedCrossFade( duration: const Duration(milliseconds: 600), reverseDuration: const Duration(milliseconds: 400), firstCurve: Curves.easeIn, secondCurve: Curves.easeOut, sizeCurve: Curves.fastOutSlowIn, firstChild: /* 状态 A 的内容 */, secondChild: /* 状态 B 的内容 */, crossFadeState: _showFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond, )

例如登录页在“账号密码登录”与“短信验证码登录”两种表单之间的切换，就是AnimatedCrossFade非常典型的落地场景。

五、如何运行与验证

示例是一个完整的独立 Flutter 工程，位于 mecury_project/example/animated_cross_fade，运行方式与标准 Flutter 项目一致：

cd mecury_project/example/animated_cross_fade flutter pub get flutter run

几点环境相关的说明：

工程的 pubspec.yaml 声明的环境约束为sdk: ">=2.0.0-dev.68.0 <3.0.0"，属于 Flutter 早期版本创建的项目；运行时请以你本机实际的 Flutter / Dart SDK 版本为准；
Android 端入口为 MainActivity.java，基于FlutterActivity并注册插件，无需额外改动；
工程自带的 widget_test.dart 仍是脚手架默认的计数器冒烟测试模板，并未针对本 Demo 改写，从源码结构看其断言与AnimatedCrossFadeDemo无关；如需为本 Demo 编写测试，可以仿照该文件，用tester.tap触发GestureDetector的onTap，再通过find.byType(AnimatedCrossFade)与tester.pump(duration)验证crossFadeState是否如期切换。

六、小结

围绕仓库中的 animated_cross_fade README 与其配套 Demo，本文完整覆盖了AnimatedCrossFade的四个核心参数（duration、firstChild、secondChild、crossFadeState）、底层隐式动画过渡原理、可扩展的可选参数以及工程的运行方式。掌握它之后，你就能以极少的代码实现两个 Widget 之间流畅的交叉淡化过渡，是提升界面切换质感的高性价比组件。