flutter 你什么时候使用 WidgetsBindingObserver ？

Flutter 中 WidgetsBindingObserver 的使用场景与示例

WidgetsBindingObserver 是一个用于监听应用程序生命周期变化和窗口尺寸等事件的接口。以下是一些常见的使用场景及相应的代码示例：

1. 监听应用生命周期事件

如果需要在应用进入后台、恢复前台等状态变化时执行一些操作，例如暂停或恢复音视频播放、存储或恢复数据等，可以通过实现 WidgetsBindingObserver 来监听这些变化。

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

class LifecycleObserverWidget extends StatefulWidget {
  @override
  _LifecycleObserverWidgetState createState() => _LifecycleObserverWidgetState();
}

class _LifecycleObserverWidgetState extends State<LifecycleObserverWidget> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance?.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance?.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.inactive) {
      print('App is inactive');
    } else if (state == AppLifecycleState.paused) {
      print('App is paused');
    } else if (state == AppLifecycleState.resumed) {
      print('App is resumed');
    } else if (state == AppLifecycleState.detached) {
      print('App is detached');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lifecycle Observer'),
      ),
      body: Center(
        child: Text('Check console for lifecycle events'),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: LifecycleObserverWidget()));
}

2. 监听窗口尺寸变化

在需要对窗口尺寸变化进行响应的场景中，例如应用在桌面设备或移动设备上旋转屏幕时自动调整布局，可以通过实现 didChangeMetrics 来监听窗口尺寸的变化。

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

class WindowMetricsObserverWidget extends StatefulWidget {
  @override
  _WindowMetricsObserverWidgetState createState() => _WindowMetricsObserverWidgetState();
}

class _WindowMetricsObserverWidgetState extends State<WindowMetricsObserverWidget> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance?.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance?.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    final window = WidgetsBinding.instance?.window;
    if (window != null && window.hasFrame) {
      final size = window.physicalSize / window.devicePixelRatio;
      print('Window size: ${size.width}x${size.height}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Window Metrics Observer'),
      ),
      body: Center(
        child: Text('Rotate device to see window metrics changes in console'),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: WindowMetricsObserverWidget()));
}

3. 监听系统亮度模式变化

在需要检测系统亮度模式（如暗色模式和浅色模式）变化时，可以通过实现 didChangePlatformBrightness 方法来动态更新应用的主题设置。

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

class BrightnessObserverWidget extends StatefulWidget {
  @override
  _BrightnessObserverWidgetState createState() => _BrightnessObserverWidgetState();
}

class _BrightnessObserverWidgetState extends State<BrightnessObserverWidget> with WidgetsBindingObserver {
  Brightness _brightness = Brightness.light;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance?.addObserver(this);
    _brightness = WidgetsBinding.instance?.window.platformBrightness ?? Brightness.light;
  }

  @override
  void dispose() {
    WidgetsBinding.instance?.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangePlatformBrightness() {
    setState(() {
      _brightness = WidgetsBinding.instance?.window.platformBrightness ?? Brightness.light;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: _brightness,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Brightness Observer'),
        ),
        body: Center(
          child: Text('Current brightness: $_brightness'),
        ),
      ),
    );
  }
}

void main() {
  runApp(BrightnessObserverWidget());
}

4. 监听系统语言变化

如果应用需要动态响应系统语言的切换，可以通过 didChangeLocales 来监听系统的区域设置变化，从而重新加载国际化配置。

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

class LocaleObserverWidget extends StatefulWidget {
  @override
  _LocaleObserverWidgetState createState() => _LocaleObserverWidgetState();
}

class _LocaleObserverWidgetState extends State<LocaleObserverWidget> with WidgetsBindingObserver {
  Locale _locale = Locale('en', 'US');

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance?.addObserver(this);
    _locale = Localizations.localeOf(context);
  }

  @override
  void dispose() {
    WidgetsBinding.instance?.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeLocales(List<Locale> localeList) {
    setState(() {
      _locale = localeList.first;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      supportedLocales: [Locale('en', 'US'), Locale('zh', 'CN')],
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      locale: _locale,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Locale Observer'),
        ),
        body: Center(
          child: Text('Current locale: ${_locale.languageCode}-${_locale.countryCode}'),
        ),
      ),
    );
  }
}

void main() {
  runApp(LocaleObserverWidget());
}

使用注意事项

• 使用 WidgetsBindingObserver 时，需要在 initState 中添加观察者 (addObserver)，并在 dispose 中移除观察者 (removeObserver)，以避免内存泄漏。
• WidgetsBindingObserver 适合在需要实时响应系统或应用状态变化的场景中使用，帮助提升应用的交互性和响应性。