Flutter Widget 之AnimatedCrossFade

cross fade是电影术语，指一要素渐进淡入另一要素。

若Flutter widget也有类似功能应该会很实用吧？

某种方式，让两个widget渐进转换而非骤然转变。Flutter已经有这个功能，这个widget就叫做AnimatedCrossFade

先给交叉淡入widget两个孩子（子节点）:第一和第二孩子（节点），在命令AnimatedCrossFade指定动画时间,最后，设定要呈现的是那个widget

AnimatedCrossFade(
    crossFadeState: CrossFadeState.showFirst,
    duration: const Duration(milliseconds: 200),
    firsrChild: hello,
    secondChild: googbye,
);

希望的书根据app状态来调整淡入状态,为此 AnimatedCrossFade会根据你的app的状态来显示正确的widget。

AnimatedCrossFade(
    crossFadeState: shouleWelcomeUser
        ? CrossFadeState.showFirst
        : CrossFadeState.showSecond,
    duration: const Duration(milliseconds: 200),
    firsrChild: hello,
    secondChild: googbye,
);

你完全无需顾虑中间态。

例如，你若转换到第二widget并在动画结束回归第一个widget，AnimatedCrossFade也可以实现。

若两个widget尺寸相同，AnimatedCrossFade更能运作流畅，但必要时，即使尺寸各异也能切换。

单若交叉淡入的范围时两个大小不定的widget，AnimatedCrossFade会依预设定方式运作。

至于特定尺寸的widget，你可能需要自订LayoutBuilder以免布局像下面这样抖动。

例子 如何避免这种抖动,两个widget间的交叉淡入在尺寸上也契合。至于精确的解方，依你的需求而定。

return AnimatedCrossFade(
    ...
    layoutBuilder: (topChild, topChildKey,
        bottomChild, bottomChildKey){
        return Stack(
            overflow: Overflow.visiable,
            alignment: Alignment.center,
            child: <Widget>[
                Positioned(
                    key: bottomChildKey,
                    top: 0,
                    child: bottomChild,
                ),
                Positioned(
                    key: topChildKey,
                    child: topChild,
                ),
            ],
        );
    },
);

CrossFade widget时高度可结构化的。你可自定义水平和垂直的动画时间和曲线，这样的效果就能完全如你所愿。

return AnimatedCrossFade(
    crossFadeState: shouldWelcomeUser
        ? CrossFadeState.showFirst
        : CrossFadeState.showSecond,
    duration: const Duration(millseconds: 1000),
    firstCurve: Curves.easeOut,
    secondCurve: Curves.easeIn,
    sizeCurveL Curves.bounceOut,
    firstChild: hello,
    secondChildL goodbye,
);

如果想了解有关AnimatedCrossFade的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址