Flutter | AnimatedCrossFade - 交叉淡入 Widget

最新推荐文章于 2025-03-11 22:29:57 发布

Flutter 笔记

最新推荐文章于 2025-03-11 22:29:57 发布

阅读量2.1k

点赞数 1

文章标签： flutter

本文链接：https://blog.youkuaiyun.com/qq_23756803/article/details/106536277

版权

本文详细介绍了Flutter中的 AnimatedCrossFade组件，包括官方介绍、构造函数解析，以及通过官方Demo演示其基本用法。还深入源码分析了动画过程中可能遇到的问题及其解决方案，展示了如何在大小变化中实现平滑过渡。最后提出了一个思考题，鼓励读者探索更多应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看到这个标题的时候，有没有同学想到了一篇文章：Flutter | 求求你们了，切换 Widget 的时候加上动画吧！^[1]

是否想起了那个组件：AnimatedSwitcher？

这两个控件有相似的地方，也有不同的地方。

但是这篇并不打算说出来他俩有什么不同，主要来讲解 AnimatedCrossFade 该组件使用的方式和大致可以使用的场景。

😮 先来了解一下 AnimatedCrossFade

1. 首先看一下官方介绍

A widget that cross-fades between two given children and animates itself between their sizes.

在两个子 Widget 之间交叉淡入并在其大小之间设置动画的小部件。

其中「交叉淡入」其实是电影中的术语，意思就是由一个要素进入另一个要素。

也就是「由一个 Widget 进入另一个 Widget」。

2. 再来看一下构造函数

const AnimatedCrossFade({
  Key key,
  @required this.firstChild,
  @required this.secondChild,
  this.firstCurve = Curves.linear,
  this.secondCurve = Curves.linear,
  this.sizeCurve = Curves.linear,
  this.alignment = Alignment.topCenter,
  @required this.crossFadeState,
  @required this.duration,
  this.reverseDuration,
  this.layoutBuilder = defaultLayoutBuilder,
}) : assert(firstChild != null),
assert(secondChild != null),
assert(firstCurve != null),
assert(secondCurve != null),
assert(sizeCurve != null),
assert(alignment != null),
assert(crossFadeState != null),
assert(duration != null),
assert(layoutBuilder != null),
super(key: key);

可以看到必要的参数有四个：