AnimatedCrossFade 动画渐变

最新推荐文章于 2025-07-21 22:05:15 发布

原创最新推荐文章于 2025-07-21 22:05:15 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

220 篇文章

订阅专栏

这篇博客介绍了如何在Flutter应用中通过AnimatedCrossFade组件创建两个Widget之间的平滑渐变动画。示例代码展示了如何设置动画时长、选择显示的Widget状态，并实现3秒的渐变过渡效果。

实现两个Widget之间的渐变动画

 AnimatedCrossFade(
            duration: const Duration(seconds: 3),
            firstChild: const FlutterLogo(
                style: FlutterLogoStyle.horizontal, size: 100.0),
            secondChild:
                const FlutterLogo(style: FlutterLogoStyle.stacked, size: 100.0),
            crossFadeState:
                _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
          ),