Flutter中AnimatedSwitcher实现组件间自动循环动画问题求助

问题修复说明 #

你的代码存在3处可直接定位的错误，修复后即可实现Text和Image自动循环切换的动画效果：

• 定时器未绑定实例：initState中创建的周期定时器没有赋值给预先声明的timer变量，页面销毁时无法正常取消定时器，会触发内存泄漏
• 索引更新逻辑错误：你使用了后置自增index++，赋值时会先返回index的原始值再执行自增，实际上索引不会发生变化，需要修改为index + 1或者前置自增++index
• 销毁方法递归调用：dispose回调中直接调用了dispose()，会触发无限递归导致栈溢出，需要修改为调用父类方法super.dispose()

修复后完整代码 #

import 'dart:async';
import 'package:flutter/material.dart';

class SimpleTry extends StatefulWidget {
  const SimpleTry({Key? key}) : super(key: key);

  @override
  _SimpleTryState createState() => _SimpleTryState();
}

class _SimpleTryState extends State<SimpleTry> {
  int index = 0;

  final widgets = const [
    FirstWidget(),
    SecondWidget(),
  ];

  Timer? timer;

  @override
  void initState() {
    super.initState();
    // 把定时器实例赋值给timer变量
    timer = Timer.periodic(const Duration(seconds: 1), (Timer t) {
      final isLastIndex = index == widgets.length - 1;
      // 修复索引更新逻辑
      setState(() => index = isLastIndex ? 0 : index + 1);
    });
  }

  @override
  void dispose() {
    timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            AnimatedSwitcher(
              duration: const Duration(seconds: 1),
              child: widgets[index],
            ),
          ],
        ),
      ),
    );
  }
}

class SecondWidget extends StatelessWidget {
  const SecondWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Image.asset(
      'images/u trap.png',
      width: 150,
      height: 150,
      key: const Key('1'),
    );
  }
}

class FirstWidget extends StatelessWidget {
  const FirstWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Text(
      'Hi',
      key: Key('2'),
    );
  }
}

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