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

AnLifecycle借鉴了AndroidX的生命周期实现，使Flutter开发者能够在需要的地方感知当前上下文的生命周期状态。本文将详细介绍如何使用anlifecycle插件来管理Flutter应用的生命周期。

生命周期事件和状态

生命周期事件

enum LifecycleEvent {
  create,
  start,
  resume,
  pause,
  stop,
  destroy,
}

生命周期状态

enum LifecycleState {
  destroyed,
  initialized,
  created,
  started,
  resumed,
}

使用方法

1.1 包装应用并注册观察者

首先，使用LifecycleApp包装默认的应用，并在MaterialApp中注册LifecycleNavigatorObserver.hookMode()以监听路由事件变化。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LifecycleApp(
      child: MaterialApp(
        navigatorObservers: [
          LifecycleNavigatorObserver.hookMode(),
        ],
        routes: {
          '/': (context) => const MyHomePage(title: 'LifecycleApp'),
          '/first': (_) => const FistPage(),
          '/second': (_) => const SecondPage(),
          '/pageView': (_) => const PageViewExample(),
        },
      ),
    );
  }
}

1.2 观察PageView或TabBarView中的项目生命周期

如果需要观察PageView或TabBarView中的项目生命周期，可以使用LifecyclePageView或LifecycleTabBarView。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LifecyclePageView(
      children: [
        for (int i = 0; i < 9; i++) ItemView(index: i),
      ],
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LifecycleTabBarView(
      children: [
        for (int i = 0; i < 9; i++) ItemView(index: i),
      ],
    );
  }
}

1.3 利用完整的生命周期状态和事件

可以通过混入LifecycleRegistryStateMixin来利用完整的生命周期状态和事件。

class FistPage extends StatefulWidget {
  const FistPage({super.key});

  [@override](/user/override)
  State<FistPage> createState() => _FistPageState();
}

class _FistPageState extends State<FistPage>
    with LifecycleRegistryStateMixin, LifecycleEventPrinter {
  [@override](/user/override)
  void initState() {
    super.initState();

    addLifecycleObserver(LifecycleObserver.stateChange((state) {
      print('LifecycleStatePrinter $runtimeType $state');
    }));

    addLifecycleObserver(LifecycleObserver.eventAny((event) {
      print('LifecycleEventPrinter $runtimeType $event');
    }));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fist Page'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            GestureDetector(
              onTap: () {
                Navigator.of(context).pushNamed('/second');
              },
              child: const Text('Tap go second page'),
            ),
            const Padding(padding: EdgeInsets.only(top: 12)),
            GestureDetector(
              onTap: () {
                showDialog(
                    context: context,
                    builder: (context) => const Text('dialog'));
              },
              child: const Text('Tap show Dialog'),
            ),
          ],
        ),
      ),
    );
  }
}

示例代码

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

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

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

final routes = <String, WidgetBuilder>{
  '/': (context) => const MyHomePage(title: 'LifecycleApp'),
  '/first': (_) => const FistPage(),
  '/second': (_) => const SecondPage(),
  '/pageView': (_) => const PageViewExample(),
};

mixin LifecycleEventPrinter<W extends StatefulWidget> on LifecycleRegistryStateMixin<W> {
  String get otherTag => '';

  [@override](/user/override)
  void initState() {
    super.initState();
    final printer = LifecycleObserver.eventAny((event) {
      print('LifecycleEventPrinter $runtimeType $otherTag $event');
    });
    addLifecycleObserver(printer);
  }
}

mixin LifecycleStatePrinter<W extends StatefulWidget> on LifecycleRegistryStateMixin<W> {
  String get otherTag => '';

  [@override](/user/override)
  void initState() {
    super.initState();
    final printer = LifecycleObserver.stateChange((state) {
      print('LifecycleStatePrinter $runtimeType $otherTag $state');
    });
    addLifecycleObserver(printer);
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with LifecycleRegistryStateMixin, LifecycleEventPrinter {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).pushNamed('/first');
          },
          child: const Text('Tap go first page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatefulWidget {
  const SecondPage({super.key});

  [@override](/user/override)
  State<SecondPage> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage>
    with LifecycleRegistryStateMixin, LifecycleEventPrinter {
  [@override](/user/override)
  Widget build(BuildContext context) {
    print('SecondPage build');
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Page'),
      ),
      body: const Center(
        child: Text('Second'),
      ),
    );
  }
}

class PageViewExample extends StatefulWidget {
  const PageViewExample({super.key});

  [@override](/user/override)
  State<PageViewExample> createState() => _PageViewExampleState();
}

class _PageViewExampleState extends State<PageViewExample>
    with LifecycleRegistryStateMixin, LifecycleEventPrinter {
  final PageController _pageController = PageController(initialPage: 2);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PageViewExample'),
      ),
      body: LifecyclePageView(
        controller: _pageController,
        children: [
          for (int i = 0; i < 9; i++) ItemView(index: i),
        ],
      ),
    );
  }
}

class ItemView extends StatefulWidget {
  final int index;

  const ItemView({super.key, required this.index});

  [@override](/user/override)
  State<ItemView> createState() => _ItemViewState();
}

class _ItemViewState extends State<ItemView>
    with LifecycleRegistryStateMixin, LifecycleEventPrinter {
  [@override](/user/override)
  String get otherTag => 'Page index ${widget.index}';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green[(widget.index + 1) * 100],
      child: Center(
        child: Text('Page index ${widget.index}'),
      ),
    );
  }
}