Flutter：应用恢复时如何更新Widget？

当然有办法啦！针对你这种基于时间的应用场景，我给你整理了几个实用的方案，能确保用户回到应用时立刻更新时间显示：

方案一：使用WidgetsBindingObserver监听生命周期 #

这是Flutter中监听应用生命周期的经典方法，兼容性好，适合所有版本的Flutter。

步骤很简单：

• 在你的State类中混入WidgetsBindingObserver
• 在initState中注册观察者，dispose中移除
• 重写didChangeAppLifecycleState方法，监听AppLifecycleState.resumed状态（也就是应用回到前台时），触发状态更新

代码示例：

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

  @override
  State<TimeDisplayWidget> createState() => _TimeDisplayWidgetState();
}

class _TimeDisplayWidgetState extends State<TimeDisplayWidget> with WidgetsBindingObserver {
  late DateTime _currentTime;

  @override
  void initState() {
    super.initState();
    // 注册生命周期观察者
    WidgetsBinding.instance.addObserver(this);
    _currentTime = DateTime.now();
  }

  @override
  void dispose() {
    // 移除观察者，避免内存泄漏
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 当应用从后台回到前台时，更新时间
    if (state == AppLifecycleState.resumed) {
      setState(() {
        _currentTime = DateTime.now();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Text(
      _currentTime.toLocal().toString(),
      style: const TextStyle(fontSize: 18),
    );
  }
}

方案二：使用AppLifecycleListener（Flutter 3.10+推荐） #

如果你用的是Flutter 3.10及以上版本，推荐用这个新API，它的写法更简洁，不需要混入类，直接通过回调监听生命周期事件。

代码示例：

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

  @override
  State<TimeDisplayWidget> createState() => _TimeDisplayWidgetState();
}

class _TimeDisplayWidgetState extends State<TimeDisplayWidget> {
  late DateTime _currentTime;
  late AppLifecycleListener _lifecycleListener;

  @override
  void initState() {
    super.initState();
    _currentTime = DateTime.now();
    // 初始化生命周期监听器，只监听resumed事件
    _lifecycleListener = AppLifecycleListener(
      onResume: () {
        setState(() {
          _currentTime = DateTime.now();
        });
      },
    );
  }

  @override
  void dispose() {
    // 释放监听器资源
    _lifecycleListener.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text(
      _currentTime.toLocal().toString(),
      style: const TextStyle(fontSize: 18),
    );
  }
}

进阶：实时更新时间（结合Timer） #

如果你的应用需要时间每秒实时跳动，而不只是回到前台时更新一次，可以结合Timer.periodic，在应用前台时启动定时器，后台时取消，避免不必要的资源消耗：

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

  @override
  State<TimeDisplayWidget> createState() => _TimeDisplayWidgetState();
}

class _TimeDisplayWidgetState extends State<TimeDisplayWidget> {
  late DateTime _currentTime;
  late AppLifecycleListener _lifecycleListener;
  Timer? _updateTimer;

  @override
  void initState() {
    super.initState();
    _currentTime = DateTime.now();
    _startUpdateTimer();
    _lifecycleListener = AppLifecycleListener(
      onResume: () => _startUpdateTimer(),
      onPause: () => _stopUpdateTimer(),
    );
  }

  void _startUpdateTimer() {
    // 先取消之前的定时器，避免重复
    _stopUpdateTimer();
    _updateTimer = Timer.periodic(const Duration(seconds: 1), (_) {
      setState(() {
        _currentTime = DateTime.now();
      });
    });
  }

  void _stopUpdateTimer() {
    _updateTimer?.cancel();
    _updateTimer = null;
  }

  @override
  void dispose() {
    _stopUpdateTimer();
    _lifecycleListener.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text(
      _currentTime.toLocal().toString().substring(0, 19), // 只显示时分秒部分
      style: const TextStyle(fontSize: 18),
    );
  }
}

这些方案都能完美解决你的需求，根据你的Flutter版本和具体场景选择就行～

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