Flutter有状态组件定时函数问题：退出页面后仍会执行吗？

问题核心是你创建的Timer.periodic没有在页面销毁时被取消，且页面销毁后仍基于无效上下文执行setState和SnackBar操作。按以下步骤修改代码即可解决：

1. 声明Timer引用 #

在State类中添加Timer?类型的成员变量，用于保存周期性任务的实例：

Timer? _timer;

2. 绑定Timer实例 #

修改startLoadingNewMessagesPeriodically方法，将创建的Timer赋值给_timer：

void startLoadingNewMessagesPeriodically() {
  _timer = Timer.periodic(const Duration(seconds: 5), (timer) {
    loadNewMessages();
  });
}

3. 页面销毁时取消Timer #

重写dispose方法，在页面销毁时终止周期性任务：

@override
void dispose() {
  _timer?.cancel();
  _timer = null;
  super.dispose();
}

4. 避免无效UI操作 #

在loadMessages和loadNewMessages中，执行setState或显示SnackBar前，先判断当前widget是否处于挂载状态，防止基于无效上下文的操作：

Future<void> loadMessages() async {
  try {
    Map<String, dynamic> data = await chatVM.fetchConvoApi();
    List<dynamic> messagesJson = data['messages'];

    if (mounted) {
      setState(() {
        if (messagesJson.isNotEmpty) {
          _messages = messagesJson.map((e) => Message.fromJson(e)).toList();
        }
        startLoadingNewMessagesPeriodically();
      });
    }
  } catch (e) {
    if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('加载失败: $e')),
      );
    }
  }
}

Future<void> loadNewMessages() async {
  String? time;
  if (_messages.isNotEmpty) {
    time = _messages[_messages.length - 1].sentTime;
  }
  try {
    Map<String, dynamic> data =
        await chatVM.fetchLatestApi(time ?? DateTime.now().toIso8601String());
    List<dynamic> messagesJson = data['messages'];
    if (messagesJson.isNotEmpty && mounted) {
      setState(() {
        _messages.addAll(messagesJson.map((e) => Message.fromJson(e)).toList());
      });
    }
  } catch (e) {
    if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('请求失败: $e')),
      );
    }
  }
}

修改后的完整代码 #

class YourChatWidget extends StatefulWidget {
  // 你的StatefulWidget定义代码
  @override
  State<YourChatWidget> createState() => _YourChatWidgetState();
}

class _YourChatWidgetState extends State<YourChatWidget> {
  List<Message> _messages = [];
  Timer? _timer;

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

  @override
  void dispose() {
    _timer?.cancel();
    _timer = null;
    super.dispose();
  }

  Future<void> loadMessages() async {
    try {
      Map<String, dynamic> data = await chatVM.fetchConvoApi();
      List<dynamic> messagesJson = data['messages'];

      if (mounted) {
        setState(() {
          if (messagesJson.isNotEmpty) {
            _messages = messagesJson.map((e) => Message.fromJson(e)).toList();
          }
          startLoadingNewMessagesPeriodically();
        });
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('加载失败: $e')),
        );
      }
    }
  }

  Future<void> loadNewMessages() async {
    String? time;
    if (_messages.isNotEmpty) {
      time = _messages[_messages.length - 1].sentTime;
    }
    try {
      Map<String, dynamic> data =
          await chatVM.fetchLatestApi(time ?? DateTime.now().toIso8601String());
      List<dynamic> messagesJson = data['messages'];
      if (messagesJson.isNotEmpty && mounted) {
        setState(() {
          _messages.addAll(messagesJson.map((e) => Message.fromJson(e)).toList());
        });
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('请求失败: $e')),
        );
      }
    }
  }

  void startLoadingNewMessagesPeriodically() {
    _timer = Timer.periodic(const Duration(seconds: 5), (timer) {
      loadNewMessages();
    });
  }

  @override
  Widget build(BuildContext context) {
    // 你的页面构建代码
    return Container();
  }
}

核心说明 #

• 通过保存Timer引用并在dispose中取消，彻底终止页面销毁后的周期性任务。
• 检查mounted状态，确保只有在widget正常挂载时才执行UI更新操作，避免无效上下文导致的异常和弹窗。

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