Flutter中调用setState后如何将变量重置为初始空值

问题场景 #

目标变量初始值为空字符串，项目基于socket通信，在initState生命周期内注册socket事件监听，监听到指定事件触发时会把变量赋值为"1"。需要实现变量被赋值为"1"后，无需退出重进当前页面，就能自动重置回初始的空字符串""。
问题对应代码如下：

class _StatusTextState extends State<StatusText> {
  String check = "";
  @override
  void initState() {
    super.initState();

    widget.socket.on('messageSeen', (data) {
      if (data['seen'] == true) {
        if (mounted) {
          setState(() {
            check = "1"; // 此处setState将变量赋值为"1"后，需要将其重置回""
          });
        }
      }
    });
  }

可直接复用的实现方案 #

根据需要的重置时机，选对应方案即可：

• 方案1：当前帧渲染完成后立刻重置，适合需要UI先响应check = "1"的状态、渲染完对应效果就马上还原的场景
  用addPostFrameCallback注册下一帧回调，保证当前赋值触发的UI渲染完成后，再执行重置逻辑，不会出现值还没被UI读取就被改回的问题：

  if (mounted) {
    setState(() {
      check = "1";
    });
    // 当前帧渲染结束后自动重置
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (mounted) {
        setState(() {
          check = "";
        });
      }
    });
  }
  

• 方案2：延迟固定时长后重置，适合需要让"1"对应的状态保持一段时间（比如状态提示、动画效果展示几百毫秒再消失）的场景
  用Future.delayed设置等待时长，时间到了再执行重置，时长可以根据业务需求自行调整：

  if (mounted) {
    setState(() {
      check = "1";
    });
    // 例：等待300毫秒后重置
    Future.delayed(const Duration(milliseconds: 300), () {
      if (mounted) {
        setState(() {
          check = "";
        });
      }
    });
  }
  

注意：所有异步回调里调用setState前必须判断mounted属性，避免组件销毁后触发状态更新导致报错。

• 补充优化：记得在dispose生命周期里移除注册的socket事件监听，避免内存泄漏、事件重复触发的问题：

  @override
  void dispose() {
    widget.socket.off('messageSeen');
    super.dispose();
  }
  

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