Flutter焦点检测插件pb_focus_detector的使用

Focus Detector

获取每次您的小部件从屏幕上出现或消失时的通知。

类似于Android中的onResume()/onPause()和iOS中的viewDidAppear()/viewDidDisappear()。

Focus Detector会在您的小部件获得或失去焦点时触发回调。例如：

• 用户导航到其他屏幕；
• 关闭设备屏幕时您的小部件仍然可见；
• 切换到其他应用时您的小部件仍然可见；
• 滚动导致您的小部件进入或离开屏幕。

使用方法

以下是pb_focus_detector的基本用法示例：

[@override](/user/override)
Widget build(BuildContext context) => FocusDetector(
      // 当小部件失去焦点时触发
      onFocusLost: () {
        logger.i(
          'Focus Lost.'
          '\nTriggered when either [onVisibilityLost] or [onForegroundLost] '
          'is called.'
          '\nEquivalent to onPause() on Android or viewDidDisappear() on iOS.',
        );
      },
      // 当小部件获得焦点时触发
      onFocusGained: () {
        logger.i(
          'Focus Gained.'
          '\nTriggered when either [onVisibilityGained] or '
          '[onForegroundGained] '
          'is called.'
          '\nEquivalent to onResume() on Android or viewDidAppear() on iOS.',
        );
      },
      // 当小部件不可见时触发
      onVisibilityLost: () {
        logger.i(
          'Visibility Lost.'
          '\nIt means the widget is no longer visible within your app.',
        );
      },
      // 当小部件重新可见时触发
      onVisibilityGained: () {
        logger.i(
          'Visibility Gained.'
          '\nIt means the widget is now visible within your app.',
        );
      },
      // 当小部件失去前台状态时触发（如切换到其他应用）
      onForegroundLost: () {
        logger.i(
          'Foreground Lost.'
          '\nIt means, for example, that the user sent your app to the '
          'background by opening another app or turned off the device\'s '
          'screen while your widget was visible.',
        );
      },
      // 当小部件恢复前台状态时触发（如返回本应用）
      onForegroundGained: () {
        logger.i(
          'Foreground Gained.'
          '\nIt means, for example, that the user switched back to your app '
          'or turned the device\'s screen back on while your widget was '
          'visible.',
        );
      },
      child: Container(), // 小部件的子节点
    );

使用场景

以下是一些常见的使用场景：

1. 资源控制：
   在小部件失去焦点时关闭高耗能功能（如相机、位置服务、蓝牙等），在获得焦点时重新启用。

2. 数据同步：
   在小部件获得焦点时与远程API或本地数据库同步数据。

3. 媒体播放控制：
   暂停和恢复视频或音频的播放。

完整示例代码

以下是一个完整的示例，展示了如何使用pb_focus_detector来检测小部件的焦点变化。

示例代码

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

class FocusDetectorExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) => FocusDetector(
        onFocusLost: () {
          logger.i(
            'Focus Lost.'
            '\nTriggered when either [onVisibilityLost] or [onForegroundLost] '
            'is called.'
            '\nEquivalent to onPause() on Android or viewDidDisappear() on '
            'iOS.',
          );
        },
        onFocusGained: () {
          logger.i(
            'Focus Gained.'
            '\nTriggered when either [onVisibilityGained] or '
            '[onForegroundGained] '
            'is called.'
            '\nEquivalent to onResume() on Android or viewDidAppear() on iOS.',
          );
        },
        onVisibilityLost: () {
          logger.i(
            'Visibility Lost.'
            '\nIt means the widget is no longer visible within your app.',
          );
        },
        onVisibilityGained: () {
          logger.i(
            'Visibility Gained.'
            '\nIt means the widget is now visible within your app.',
          );
        },
        onForegroundLost: () {
          logger.i(
            'Foreground Lost.'
            '\nIt means, for example, that the user sent your app to the '
            'background by opening another app or turned off the device\'s '
            'screen while your widget was visible.',
          );
        },
        onForegroundGained: () {
          logger.i(
            'Foreground Gained.'
            '\nIt means, for example, that the user switched back to your app '
            'or turned the device\'s screen back on while your widget was '
            'visible.',
          );
        },
        child: Material(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  '发送应用到后台或推送另一个页面并观察控制台输出。',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 20,
                  ),
                ),
                const SizedBox(
                  height: 20,
                ),
                ElevatedButton(
                  onPressed: () {
                    final route = MaterialPageRoute(
                      builder: (_) => OtherPage(),
                    );
                    Navigator.of(context).push(route);
                  },
                  child: const Text(
                    '推送另一个页面',
                  ),
                )
              ],
            ),
          ),
        ),
      );
}

class OtherPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(),
        body: const Padding(
          padding: EdgeInsets.all(16),
          child: Center(
            child: Text(
              '查看控制台并返回第一个页面。',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 20,
              ),
            ),
          ),
        ),
      );
}

Logger logger = Logger(
  printer: PrettyPrinter(
    methodCount: 0,
    printTime: false,
  ),
);

void main() {
  runApp(
    MaterialApp(
      home: FocusDetectorExample(),
      theme: ThemeData(),
    ),
  );
}