我的技术分享

Appearance

WidgetsBinding 详解：Flutter 的调度核心 ​

本文深入讲解 Flutter 中 WidgetsBinding 的作用、工作机制和使用场景。

什么是 WidgetsBinding？ ​

WidgetsBinding 是 Flutter 框架层（widgets）与渲染/调度层（scheduler）之间的桥梁，负责：

  • 帧调度：管理 UI 刷新和渲染
  • 手势事件分发：处理用户交互
  • 语义树更新：支持无障碍功能
  • 生命周期管理：监听应用状态变化

WidgetsBinding.instance ​

基本信息 ​

dart
// 类型
WidgetsBinding? instance

// 获取方式
WidgetsBinding.instance.addPostFrameCallback((_) {
  // 在这里执行帧后回调
});

关键特性 ​

  • 单例模式：全局唯一实例
  • 自动初始化：runApp() 时自动创建
  • 空安全：在现代 Flutter 中几乎总是非空

常见用途 ​

dart
// 1. 帧后回调
WidgetsBinding.instance.addPostFrameCallback((_) {
  print('当前帧绘制完成');
});

// 2. 持久帧回调
WidgetsBinding.instance.addPersistentFrameCallback((timeStamp) {
  print('每帧都会执行');
});

// 3. 请求新帧
WidgetsBinding.instance.scheduleFrame();

// 4. 获取窗口信息
final window = WidgetsBinding.instance.window;
print('屏幕尺寸: ${window.physicalSize}');

WidgetsBindingObserver ​

用于监听应用生命周期和系统事件。

完整示例 ​

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

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

  @override
  State<LifecycleObserverPage> createState() => _LifecycleObserverPageState();
}

class _LifecycleObserverPageState extends State<LifecycleObserverPage>
    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) {
    super.didChangeAppLifecycleState(state);
    
    switch (state) {
      case AppLifecycleState.resumed:
        print('应用进入前台');
        break;
      case AppLifecycleState.inactive:
        print('应用失去焦点');
        break;
      case AppLifecycleState.paused:
        print('应用进入后台');
        break;
      case AppLifecycleState.detached:
        print('应用即将退出');
        break;
      case AppLifecycleState.hidden:
        print('应用隐藏');
        break;
    }
  }

  // 监听系统亮度变化
  @override
  void didChangePlatformBrightness() {
    super.didChangePlatformBrightness();
    final brightness = WidgetsBinding.instance.window.platformBrightness;
    print('系统亮度变化: $brightness');
  }

  // 监听内存警告
  @override
  void didHaveMemoryPressure() {
    super.didHaveMemoryPressure();
    print('收到内存警告');
  }

  // 监听语言变化
  @override
  void didChangeLocales(List<Locale>? locales) {
    super.didChangeLocales(locales);
    print('系统语言变化: $locales');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('生命周期监听')),
      body: const Center(
        child: Text('切换应用前后台查看日志'),
      ),
    );
  }
}

实际应用场景 ​

场景一：监听键盘弹出 ​

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

  @override
  State<KeyboardListenerPage> createState() => _KeyboardListenerPageState();
}

class _KeyboardListenerPageState extends State<KeyboardListenerPage>
    with WidgetsBindingObserver {
  
  bool _keyboardVisible = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

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

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    
    // 获取底部安全区域高度（键盘高度）
    final bottomInset = WidgetsBinding.instance.window.viewInsets.bottom;
    
    setState(() {
      _keyboardVisible = bottomInset > 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('键盘监听')),
      body: Column(
        children: [
          TextField(
            decoration: const InputDecoration(
              hintText: '点击输入',
            ),
          ),
          const SizedBox(height: 20),
          Text(
            '键盘状态: ${_keyboardVisible ? "显示" : "隐藏"}',
            style: const TextStyle(fontSize: 18),
          ),
        ],
      ),
    );
  }
}

场景二：自动保存草稿 ​

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

  @override
  State<AutoSavePage> createState() => _AutoSavePageState();
}

class _AutoSavePageState extends State<AutoSavePage>
    with WidgetsBindingObserver {
  
  final _textController = TextEditingController();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _loadDraft();
  }

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

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    
    // 应用进入后台时自动保存
    if (state == AppLifecycleState.paused) {
      _saveDraft();
    }
  }

  void _loadDraft() async {
    // 加载草稿
    // final draft = await storage.read('draft');
    // _textController.text = draft ?? '';
  }

  void _saveDraft() async {
    // 保存草稿
    // await storage.write('draft', _textController.text);
    print('草稿已保存: ${_textController.text}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('自动保存')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _textController,
              decoration: const InputDecoration(
                hintText: '输入内容，切换到后台自动保存',
              ),
              maxLines: 5,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _saveDraft,
              child: const Text('手动保存'),
            ),
          ],
        ),
      ),
    );
  }
}

常见问题与注意事项 ​

1. 何时使用 WidgetsBinding？ ​

场景使用方式
监听应用生命周期WidgetsBindingObserver
帧后执行操作addPostFrameCallback
持续监听帧刷新addPersistentFrameCallback
获取窗口信息WidgetsBinding.instance.window

2. Observer 必须移除 ​

dart
// ✅ 正确：在 dispose 中移除
@override
void dispose() {
  WidgetsBinding.instance.removeObserver(this);
  super.dispose();
}

// ❌ 错误：忘记移除会导致内存泄漏

3. 回调中检查状态 ​

dart
WidgetsBinding.instance.addPostFrameCallback((_) {
  // ✅ 正确：先检查 mounted
  if (!mounted) return;
  
  setState(() {
    // 更新状态
  });
});

4. 避免在回调中执行耗时操作 ​

dart
// ❌ 错误：阻塞 UI 线程
WidgetsBinding.instance.addPostFrameCallback((_) {
  heavyComputation(); // 耗时操作
});

// ✅ 正确：使用异步
WidgetsBinding.instance.addPostFrameCallback((_) {
  Future.microtask(() => heavyComputation());
});

高级用法 ​

自定义帧回调 ​

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

  @override
  State<CustomFrameCallbackWidget> createState() =>
      _CustomFrameCallbackWidgetState();
}

class _CustomFrameCallbackWidgetState
    extends State<CustomFrameCallbackWidget> {
  
  int _frameCount = 0;
  late int _callbackId;

  @override
  void initState() {
    super.initState();
    
    // 注册持久帧回调
    _callbackId = WidgetsBinding.instance.addPersistentFrameCallback((timeStamp) {
      if (!mounted) return;
      
      setState(() {
        _frameCount++;
      });
    });
  }

  @override
  void dispose() {
    // 取消持久帧回调
    WidgetsBinding.instance.cancelFrameCallbackWithId(_callbackId);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('帧计数器')),
      body: Center(
        child: Text(
          '已渲染帧数: $_frameCount',
          style: const TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

总结 ​

关键要点 ​

  1. WidgetsBinding 是 Flutter 框架与渲染层的桥梁
  2. WidgetsBindingObserver 用于监听应用和系统事件
  3. addPostFrameCallback 用于帧后执行操作
  4. 使用 Observer 必须在 dispose 中移除
  5. 回调中要检查 mounted 状态

最佳实践 ​

  • 仅在需要监听系统事件时使用 Observer
  • 帧后回调适合一次性操作
  • 避免在回调中执行耗时操作
  • 及时清理资源，防止内存泄漏

下一步学习 ​

相关资源：

本站总访问 — 次