Flutter生命周期管理插件lifecycle_provider的使用

Flutter生命周期管理插件lifecycle_provider的使用

在Flutter中，lifecycle_provider 插件能够帮助开发者更好地管理组件的生命周期。以下是该插件的一些优势：

优点

1. 绑定组件和页面路由的生命周期
2. 跨页面数据通信，无需公共父控制器
3. 基于事件的部分更新，调试和更新小部件更加方便
4. 基于 BaseController 添加 Mixin，便于业务逻辑解耦和重用

监听路由变化

为了监听路由的变化，需要将 LifecycleRouteObserver 添加到 navigatorObservers 中。

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    navigatorObservers: [LifecycleRouteObserver()],
  );
}

状态管理中的生命周期介绍

lifecycle_provider 提供了多种生命周期方法来处理不同阶段的状态变化。

enum LifecycleState {
  /// 对应于 State 的 initState
  /// 只执行一次
  onPageInit,

  /// 在 onPageInit 后立即调用，并且只调用一次
  /// 可以根据上下文获取其他 InheritWidgets 中的数据，并可以获取路由传递的参数
  /// 此方法将调用 State 的 Build 方法，因此不需要在此方法中调用 notifyListeners
  /// 只执行一次
  onPageContextReady,

  /// 当小部件的第一个帧渲染后调用。通常用于初始化网络请求操作
  /// 只执行一次
  onPagePostFrame,

  /// 当页面显示时调用，切换路由或 PageView（如果设置了 pageIndex）时也会调用
  /// 可能会多次执行
  onPageStart,

  /// 当页面显示并且可以响应用户操作时调用，切换路由或 PageView（如果设置了 pageIndex）时也会调用
  /// 当 Dialog 或 BottomSheet 弹出时，下面的页面会调用此方法
  /// 可能会多次执行
  onPageResume,

  /// 页面进入动画结束时调用
  /// 只执行一次
  onPageEnterAnimationEnd,

  /// 当页面无法响应用户操作时调用。当路由切换或 PageView（如果设置了 pageIndex）切换时也会调用
  /// 当 Dialog 或 BottomSheet 显示时，下面的页面会调用此方法
  /// 可能会多次执行
  onPagePause,

  /// 当页面不显示时调用。当路由切换或 PageView（如果设置了 pageIndex）切换时也会调用
  /// 可能会多次执行
  onPageStop,

  /// 当页面退出动画结束时调用，但可能不会回调。例如，当使用 replace 方法切换路由时，此方法不会被调用。
  /// 只执行一次
  onPageLeaveAnimationEnd,

  /// 当页面销毁时调用
  /// 只执行一次
  onPageDispose,

  /// 应用程序进入前台
  onAppResume,

  /// 应用程序处于非活动状态
  onAppInactive,

  /// 应用程序暂停
  onAppPause,

  /// 当应用程序从后台进入前台时调用
  onAppForeground,

  /// 当应用程序从前台进入后台时调用
  onAppBackground;
}

如何更新组件

使用状态管理的控制器可以继承自 BaseController 并使用 NotifyMixin, LifecycleMixin 等 Mixin。

abstract class BaseController<T extends Enum> extends ChangeNotifier
    with NotifyMixin<T>, LifecycleMixin, EventBusMixin {
  [@override](/user/override)
  @mustCallSuper
  void onPageInit() {
    super.onPageInit();
    registerIds(shouldNotifyIds);
  }

  List<T> get shouldNotifyIds;
}

// 示例代码
enum UpdatePageEvent { update }

class UpdatePageController extends BasePageController<UpdatePageEvent> {
  [@override](/user/override) List<UpdatePageEvent> get shouldNotifyIds => UpdatePageEvent.values;
  int _count = 0;

  int get count => _count;

  void increase() {
    _count++;
    notifySingleListener(UpdatePageEvent.update);
  }
}

class UpdatePage extends BasePage<UpdatePageController> {
  const UpdatePage({super.key});

  [@override](/user/override)
  UpdatePageController createController(BuildContext context) {
    return UpdatePageController();
  }

  [@override](/user/override)
  Widget providerStateBuild(BuildContext context, UpdatePageController controller) {
    return Scaffold(
      appBar: AppBar(title: const Text('UpdatePage')),
      body: Center(
        child: SelectorIds<UpdatePageEvent, UpdatePageController>(
          ids: const [UpdatePageEvent.update],
          builder: (_, controller, __) {
            return Text('Current value is: ${controller.count}');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => controller.increase(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

实现跨页面通信

通过 EventBusMixin 可以实现跨页面通信。

class PageOneController extends BasePageController {
  /// 发送事件
  void sendLoginEvent() {
    dispatchEvent(const LoginEvent(true));
  }
}

class PageTwoController extends BasePageController {
  [@override](/user/override)
  void onInit() {
    super.onInit();

    /// 监听事件
    observeEvent<LoginEvent>((event) {
      debugPrint('Login event received----${event.isLogin}');
    });
  }
}

完整示例代码

import 'package:example/page_view/bottom_nav_page.dart';
import 'package:example/page_view/tab_page.dart';
import 'package:example/pages/dialog_page.dart';
import 'package:example/pages/drawer_page.dart';
import 'package:example/pages/pop_page.dart';
import 'package:example/pages/pop_until_page.dart';
import 'package:example/pages/replace_page.dart';
import 'package:example/pages/update_page.dart';
import 'package:flutter/material.dart';
import 'package:lifecycle_provider/lifecycle_provider.dart';

import 'home_page.dart';
import 'root_controller.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  AppLifecycleManager.instance.listen();
  runApp(const MyApp());
}

class MyApp extends BasePage<RootController> {
  const MyApp({super.key});

  [@override](/user/override)
  RootController createController(BuildContext context) {
    return RootController();
  }

  [@override](/user/override)
  Widget providerStateBuild(BuildContext context, RootController controller) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: false),
      routes: {
        "/tabPage": (_) => const TabPage(),
        "/bottomNav": (_) => const BottomNavPage(),
        "/drawer": (_) => const DrawerPage(),
        "/popPage": (_) => const PopPage(),
        "/popUntilPage": (_) => const PopUntilPage(),
        "/replace": (_) => const ReplacePage(),
        "/dialog": (_) => const DialogPage(),
        "/updatePage": (_) => const UpdatePage(),
      },
      home: const HomePage(),
      navigatorObservers: [LifecycleRouteObserver()],
    );
  }
}