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

描述

lifecycle 是一个用于Flutter widgets的生命周期管理插件，支持多种类型的widget，并能响应不同的生命周期事件。以下是该插件的详细介绍和使用方法。

插件特性

支持的Widgets

• ✅ StatefulWidget.
• ✅ StatelessWidget(包括Dialog).
• ✅ PageView/TabBarView 及其子项.
• ✅ 嵌套的 PageView.
• ✅ Navigator(Navigator 2.0 pages api).
• ✅ ListView/GridView/CustomScrollView 的子项.

支持的生命周期事件

enum LifecycleEvent {
  push,
  visible,
  active,
  inactive,
  invisible,
  pop,
}

快速上手

安装

1. 在 pubspec.yaml 文件中添加依赖：

   dependencies:
     lifecycle: any  # 替换 'any' 为具体的版本号
   

2. 执行命令安装：

   flutter pub get
   

3. 导入包：

   import 'package:lifecycle/lifecycle.dart';
   

使用方法

注册观察者

首先需要在 WidgetsApp 或 MaterialApp 中注册一个观察者，默认情况下，一个观察者只能用于一个 Navigator，如果你有自己的 Navigator，请使用新的 LifecycleObserver 实例。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [defaultLifecycleObserver],
      // ...
    );
  }
}

StatefulWidget

可以使用mixin或wrapper两种方式来监听生命周期事件。

使用mixin（推荐）

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

class MyStatefulWidget extends StatefulWidget {
  _State createState() => _State();
}

class _State extends State<MyStatefulWidget> with LifecycleAware, LifecycleMixin {
  @override
  void onLifecycleEvent(LifecycleEvent event) {
    print(event);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

使用wrapper

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

class MyStatefulWidget extends StatefulWidget {
  _State createState() => _State();
}

class _State extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return LifecycleWrapper(
      onLifecycleEvent: (event) {
        print(event);
      },
      child: Scaffold(),
    );
  }
}

StatelessWidget/Dialog

对于无状态组件或者对话框，可以通过 LifecycleWrapper 来包裹它们。

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

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LifecycleWrapper(
      onLifecycleEvent: (event) {
        print(event);
      },
      child: Scaffold(),
    );
  }
}

// Dialog
showDialog(
  context: context,
  routeSettings: RouteSettings(name: 'dialog'),
  builder: (context) {
    return LifecycleWrapper(
      onLifecycleEvent: (event) {
        print(event);
      },
      child: Dialog(),
    );
  },
);

PageView/TabBarView

对于分页视图和标签栏视图，可以使用 PageViewLifecycleWrapper 和 ChildPageLifecycleWrapper。

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

class MyPageView extends StatefulWidget {
  MyPageView({Key key}) : super(key: key);

  _MyPageViewState createState() => _MyPageViewState();
}

class _MyPageViewState extends State<MyPageView> {
  PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MyPageView'),
      ),
      body: PageViewLifecycleWrapper(
        child: PageView(
          controller: _pageController,
          children: [
            ChildPageLifecycleWrapper(
              index: 0,
              wantKeepAlive: true,
              onLifecycleEvent: (event) {
                print('Page@0#${event.name}');
              },
              child: Container(),
            ),
            ChildPageLifecycleWrapper(
              index: 1,
              wantKeepAlive: true,
              onLifecycleEvent: (event) {
                print('Page@1#${event.name}');
              },
              child: Container(),
            ),
          ],
        ),
      ),
    );
  }
}

Nested PageView

嵌套分页视图的例子。

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

class NestedPageView extends StatefulWidget {
  NestedPageView({Key key}) : super(key: key);

  _NestedPageViewState createState() => _NestedPageViewState();
}

class _NestedPageViewState extends State<NestedPageView> with SingleTickerProviderStateMixin {
  PageController _pageController;
  TabController _tabController;

  final List<Tab> myTabs = <Tab>[
    Tab(text: 'left'),
    Tab(text: 'right'),
  ];

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
    _tabController = TabController(vsync: this, length: myTabs.length);
  }

  @override
  void dispose() {
    _pageController.dispose();
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NestedPageView'),
        bottom: TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: PageViewLifecycleWrapper( // Outer PageView
        child: TabBarView(
          controller: _tabController,
          children: <Widget>[
            ChildPageLifecycleWrapper(
              index: 0,
              wantKeepAlive: true,
              onLifecycleEvent: (event) {
                print('OuterPage@0#${event.name}');
              },
              child: Container(),
            ),
            ChildPageLifecycleWrapper(
              index: 1,
              wantKeepAlive: true,
              onLifecycleEvent: (event) {
                print('OuterPage@1#${event.name}');
              },
              child: PageViewLifecycleWrapper( // Inner PageView
                child: PageView(
                  controller: _pageController,
                  children: [
                    ChildPageLifecycleWrapper(
                      index: 0,
                      wantKeepAlive: false,
                      onLifecycleEvent: (event) {
                        log.add('InnerPage@0#${event.name}');
                      },
                      child: Container(),
                    ),
                    ChildPageLifecycleWrapper(
                      index: 1,
                      wantKeepAlive: false,
                      onLifecycleEvent: (event) {
                        log.add('InnerPage@1#${event.name}');
                      },
                      child: Container(),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

ListView

对于列表视图，可以使用 ScrollViewItemLifecycleWrapper。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('ListPage'),
    ),
    body: ListView.builder(
      itemCount: _data.length,
      itemBuilder: (context, index) {
        return ScrollViewItemLifecycleWrapper(
          onLifecycleEvent: (LifecycleEvent event) {
            print('ListPage(item$index)#${event.name}');
          },
          wantKeepAlive: false,
          child: ListTile(
            title: Text(
              _data[index],
            ),
          ),
        );
      },
    ),
  );
}

其他API

• 遍历路由：defaultLifecycleObserver.iterateRoutes(bool Function(route) callback);
• 移除路由：defaultLifecycleObserver.removeRoute<T>(Route route, [T? result]);
• 释放观察者：当不再使用时，可以通过 defaultLifecycleObserver.dispose(); 来销毁 LifecycleObserver。

示例代码

完整示例可以在这里找到。

通过上述内容，你可以根据自己的需求选择合适的方式来管理Flutter应用中的生命周期事件。希望这些信息对你有所帮助！