Flutter应用生命周期监听插件app_lifecycle_observer的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter应用生命周期监听插件app_lifecycle_observer的使用

这个库是一个独立于上下文的Flutter生命周期观察器。

Futures

它可以处理恢复（AppLifecycleEventResumed）和暂停（AppLifecycleEventPaused）生命周期事件。

  • 观察应用生命周期事件

    • 屏幕开启/关闭
    • 应用切换到主屏幕
    • 打开通知中心等

  • 观察应用导航事件

    • 导航事件如push, pop, replace, remove等

isSystemEvent

isSystemEvent 标志可以用来判断事件是否是由导航引起的，还是由系统事件如屏幕开启/关闭引起的。

事件 isSystemEvent
屏幕开启/关闭，应用切换到主屏幕等 true
导航事件（push, pop等） false

获取开始

这个库不使用ModalRoute（即不需要Context），而是使用MaterialPage的名字来匹配生命周期事件。因此，请在MaterialPage名字中包含页面名称。

这个库可以与任何导航一起使用：Navigator, Router, GoRouter。

第一步

将AppLifecycleObserver设置为你的routeObserver。如果你有嵌套的路由，比如底部导航栏，你也需要设置appLifecycleObserver。

final appLifecycleObserver = AppLifecycleObserver();

final goRouter = GoRouter(
  initialLocation: '/',
  observers: [
    appLifecycleObserver,
  ],
  routes: [
    GoRoute(
      path: '/',
      pageBuilder: (context, state) {
        return MaterialPage(
          key: state.pageKey,
          name: '/', // 页面名称
          child: const HomePage(),
        );
      },
    ),
    GoRoute(
      path: '/page1',
      pageBuilder: (context, state) {
        return MaterialPage(
          key: state.pageKey,
          name: 'page1', // 页面名称
          child: const Page1(),
        );
      },
    ),
    GoRoute(
      path: '/page2',
      pageBuilder: (context, state) {
        return MaterialPage(
          key: state.pageKey,
          name: 'page2', // 页面名称
          child: const Page2(),
        );
      },
    ),
  ],
);
第二步

设置页面名称到MaterialPage名字。

final appLifecycleObserver = AppLifecycleObserver();

appLifecycleObserver.subscribe('pageName', (event) {
  print(event);
});
第三步

如果不再需要观察事件，请调用unsubscribe。

appLifecycleObserver.unsubscribe('pageName');

示例代码

以下是一个完整的示例代码，展示了如何使用app_lifecycle_observer插件。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: goRouter.routerDelegate,
      routeInformationParser: goRouter.routeInformationParser,
      routeInformationProvider: goRouter.routeInformationProvider,
      title: 'AppLifecycleObserver',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
    );
  }
}

更多关于Flutter应用生命周期监听插件app_lifecycle_observer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter应用生命周期监听插件app_lifecycle_observer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter应用中，app_lifecycle_observer 插件可以帮助你监听应用的生命周期事件，比如应用进入前台、进入后台等。尽管 app_lifecycle_observer 不是一个官方广泛认知的插件名（通常我们使用 flutter/services 包中的 AppLifecycleState），但基于你的要求，我将展示如何使用 flutter/services 包中的 WidgetsBindingObserver 来监听应用生命周期事件，这是实现类似功能的标准方法。

首先，确保你的 pubspec.yaml 文件中已经包含了 Flutter SDK 的依赖（通常不需要额外插件，因为 WidgetsBindingObserver 是 Flutter 框架的一部分）：

dependencies:
  flutter:
    sdk: flutter

然后，你可以创建一个 Flutter 组件，通过实现 WidgetsBindingObserver 接口来监听应用的生命周期事件。下面是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  AppLifecycleState _currentLifecycleState;

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

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

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    setState(() {
      _currentLifecycleState = state;
    });
    print('AppLifecycleState: $_currentLifecycleState');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Lifecycle Listener'),
      ),
      body: Center(
        child: Text('Current state: $_currentLifecycleState'),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 创建主应用：MyApp 是一个简单的 MaterialApp，其首页是 MyHomePage。
  2. 创建有状态的组件：MyHomePage 是一个有状态的组件，它实现了 WidgetsBindingObserver 接口。
  3. 初始化状态：在 initState 方法中，我们通过 WidgetsBinding.instance.addObserver(this) 注册了观察者。
  4. 清理资源：在 dispose 方法中，我们通过 WidgetsBinding.instance.removeObserver(this) 移除了观察者，以避免内存泄漏。
  5. 监听生命周期变化：实现了 didChangeAppLifecycleState 方法，每当应用的生命周期状态发生变化时，这个方法会被调用，并更新当前状态。
  6. 显示当前状态：在 build 方法中，我们构建了一个简单的界面，显示当前的应用生命周期状态。

这个示例展示了如何在 Flutter 应用中监听应用生命周期事件，并根据这些事件执行相应的操作。如果你确实是在寻找一个名为 app_lifecycle_observer 的特定第三方插件，并且它不是 Flutter 官方的一部分，你可能需要查阅该插件的文档或源代码来了解其使用方法，但原理通常类似，即注册观察者并处理生命周期事件。

回到顶部