Flutter中如何实现两个页面无间断自动循环切换？

要让WelcomeScreenIron和WelcomeScreenViper持续自动循环切换，你需要借助状态管理和定时触发状态更新来控制AnimatedCrossFade的显示状态，以下是两种可行方案：

方案一：用Future.delayed递归实现（动画完成立即切换） #

这种方案会在切换动画结束后立刻触发反向切换，适合需要无缝循环的场景：

class AutoCrossFadeScreen extends StatefulWidget {
  const AutoCrossFadeScreen({super.key});

  @override
  State<AutoCrossFadeScreen> createState() => _AutoCrossFadeScreenState();
}

class _AutoCrossFadeScreenState extends State<AutoCrossFadeScreen> {
  bool _isShowingFirst = false; // 初始显示第二个页面，和你原代码一致
  bool _isDisposed = false; // 标记页面是否已销毁，避免内存泄漏

  @override
  void initState() {
    super.initState();
    _startAutoSwitch();
  }

  void _startAutoSwitch() {
    // 延迟时间和动画时长保持一致，动画结束后切换状态
    Future.delayed(const Duration(seconds: 2), () {
      if (_isDisposed) return;
      setState(() {
        _isShowingFirst = !_isShowingFirst;
      });
      _startAutoSwitch(); // 递归调用，实现循环
    });
  }

  @override
  void dispose() {
    _isDisposed = true; // 页面销毁时停止递归
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedCrossFade(
      duration: const Duration(seconds: 2),
      crossFadeState: _isShowingFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond,
      firstChild: const WelcomeScreenIron(),
      secondChild: const WelcomeScreenViper(),
    );
  }
}

之后把你原代码中的home替换为const AutoCrossFadeScreen()即可。

方案二：用Timer.periodic实现（页面稳定显示后再切换） #

如果希望每个页面先稳定显示一段时间（比如2秒），再执行切换动画，可使用定时周期任务：

class AutoCrossFadeScreen extends StatefulWidget {
  const AutoCrossFadeScreen({super.key});

  @override
  State<AutoCrossFadeScreen> createState() => _AutoCrossFadeScreenState();
}

class _AutoCrossFadeScreenState extends State<AutoCrossFadeScreen> {
  bool _isShowingFirst = false;
  Timer? _switchTimer;

  @override
  void initState() {
    super.initState();
    // 周期设为4秒：2秒稳定显示 + 2秒切换动画
    _switchTimer = Timer.periodic(const Duration(seconds: 4), (timer) {
      setState(() {
        _isShowingFirst = !_isShowingFirst;
      });
    });
  }

  @override
  void dispose() {
    _switchTimer?.cancel(); // 页面销毁时取消定时器，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedCrossFade(
      duration: const Duration(seconds: 2),
      crossFadeState: _isShowingFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond,
      firstChild: const WelcomeScreenIron(),
      secondChild: const WelcomeScreenViper(),
    );
  }
}

关键说明 #

• 必须使用StatefulWidget来维护显示状态，通过setState()触发AnimatedCrossFade重新构建并切换状态。
• 两种方案都需要在页面销毁时清理定时任务，避免内存泄漏。
• 你可以根据需求调整延迟/周期时长，以及动画时长。

内容的提问来源于stack exchange，提问作者mohamed alaa