Flutter焦点检测插件focus_detector_v2的使用

Focus Detector

获取每次你的小部件出现在或消失在屏幕上的通知。

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

Focus Detector会在你的小部件获得或失去焦点时触发回调。这种事件可能包括：

• 导航到另一个屏幕；
• 关闭设备屏幕时，你的小部件仍然可见；
• 切换到另一个应用时，你的小部件仍然可见；
• 滚动你的小部件进入或离开屏幕；

使用

[@override](/user/override)
Widget build(BuildContext context) => 
    FocusDetector(
      onFocusLost: () {
        logger.i(
          'Focus Lost.'
          '\n触发当[onVisibilityLost]或[onForegroundLost]被调用时.'
          '\n等同于Android的onPause()或iOS的viewDidDisappear().',
        );
      },
      onFocusGained: () {
        logger.i(
          'Focus Gained.'
          '\n触发当[onVisibilityGained]或[onForegroundGained]被调用时.'
          '\n等同于Android的onResume()或iOS的viewDidAppear().',
        );
      },
      onVisibilityLost: () {
        logger.i(
          'Visibility Lost.'
          '\n这意味着小部件不再在你的应用中可见.',
        );
      },
      onVisibilityGained: () {
        logger.i(
          'Visibility Gained.'
          '\n这意味着小部件现在在你的应用中可见.',
        );
      },
      onForegroundLost: () {
        logger.i(
          'Foreground Lost.'
          '\n这意味着例如用户通过打开另一个应用或将设备屏幕关闭将你的应用置于后台，而此时你的小部件仍然可见.',
        );
      },
      onForegroundGained: () {
        logger.i(
          'Foreground Gained.'
          '\n这意味着例如用户切换回你的应用或将设备屏幕重新开启，而此时你的小部件仍然可见.',
        );
      },
      isWidgetTest: false,
      child: Container(),
    );

使用场景

• 开启和关闭资源消耗型功能，如摄像头、位置或蓝牙；
• 同步数据到远程API或本地数据库；
• 暂停和恢复视频或音频播放或流媒体；

从focus_detector迁移

这是Focus Detector的一个分叉版本。它已经超过一年没有更新了，所以我做了V2用于个人项目。要从V1迁移，只需在pubspec.yaml中更新依赖项为focus_detector_v2: ^3.1.0并调整你的导入文件中的引用。

贡献

任何形式的贡献都受到欢迎。请自由地通过创建拉取请求或提出问题来改进库。

示例代码

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

class FocusDetectorExample extends StatelessWidget {
  const FocusDetectorExample({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) => FocusDetector(
        onFocusLost: () {
          logger.i(
            'Focus Lost.'
            '\n触发当[onVisibilityLost]或[onForegroundLost]被调用时.'
            '\n等同于Android的onPause()或iOS的viewDidDisappear().',
          );
        },
        onFocusGained: () {
          logger.i(
            'Focus Gained.'
            '\n触发当[onVisibilityGained]或[onForegroundGained]被调用时.'
            '\n等同于Android的onResume()或iOS的viewDidAppear().',
          );
        },
        onVisibilityLost: () {
          logger.i(
            'Visibility Lost.'
            '\n这意味着小部件不再在你的应用中可见.',
          );
        },
        onVisibilityGained: () {
          logger.i(
            'Visibility Gained.'
            '\n这意味着小部件现在在你的应用中可见.',
          );
        },
        onForegroundLost: () {
          logger.i(
            'Foreground Lost.'
            '\n这意味着例如用户通过打开另一个应用或将设备屏幕关闭将你的应用置于后台，而此时你的小部件仍然可见.',
          );
        },
        onForegroundGained: () {
          logger.i(
            'Foreground Gained.'
            '\n这意味着例如用户切换回你的应用或将设备屏幕重新开启，而此时你的小部件仍然可见.',
          );
        },
        isWidgetTest: false,
        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: (_) => const OtherPage(),
                    );
                    Navigator.of(context).push(route);
                  },
                  child: const Text(
                    '推送另一页面',
                  ),
                )
              ],
            ),
          ),
        ),
      );
}

class OtherPage extends StatelessWidget {
  const OtherPage({Key? key}) : super(key: key);

  [@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: const FocusDetectorExample(),
      theme: ThemeData(),
    ),
  );
}