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

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

通过简单几步，就可以让你使用whenShow()/whenHide()方法来监听页面的生命周期（退回到了该页面/打开其他页面挡着了该页面）了。

原理

这个库的实现很简单，你完全可以通过阅读代码后自己扩展实现。主要就是在MaterialApp中添加一个对路由的监听，也就是MaterialApp#navigatorObservers，之后通过对路由的监听来记录一个路由的栈。再在对应的State#initState方法或StatelessWidget#createElement中绑定两个生命周期方法的实现到最上层路由。这样在每次监听到路由变化时，去调用顶层路由对应的绑定方法就OK了。记得在路由被移出的时候对应的方法也要移出哦~

开始使用

import 'package:lifecycle/lifecycle_mixin.dart';

1. 首先在你的根布局MaterialApp中绑定一个路由监听LifeNavigatorObserver().

   MaterialApp(
       navigatorObservers: [
           LifeNavigatorObserver(),
       ],
   );
   

2. StatefulWidget的话，需要混入LifecycleStatefulMixin，对应的StatelessWidget，使用的是LifecycleStatelessMixin.

3. 实现whenShow()/whenHide()方法,代码看起来是下面的样子。

   /// StatefulWidget页面
   class WorksDetailState extends State with LifecycleStatefulMixin {
   
       [@override](/user/override)
       void whenShow() {
           super.whenShow();
           print("LifeNavigatorObserver---Show了");
       }
   
       [@override](/user/override)
       void whenHide() {
           super.whenHide();
           print("LifeNavigatorObserver---Hide了");
       }
   }
   
   /// StatelessWidget页面
   class StatelessPage extends StatelessWidget with LifecycleStatelessMixin {
   
       [@override](/user/override)
       void whenShow() {
           super.whenShow();
           print("LifeNavigatorObserver---Show了");
       }
   
       [@override](/user/override)
       void whenHide() {
           super.whenHide();
           print("LifeNavigatorObserver---Hide了");
       }
   }
   

完整示例Demo

以下是一个完整的示例，展示了如何使用lifecycle_lite插件来监听页面的生命周期。

main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lifecycle Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Lifecycle Demo Home Page'),
      navigatorObservers: [
        LifeNavigatorObserver(),
      ],
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> with LifecycleStatefulMixin {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  void whenShow() {
    super.whenShow();
    print("LifeNavigatorObserver---Show了");
  }

  [@override](/user/override)
  void whenHide() {
    super.whenHide();
    print("LifeNavigatorObserver---Hide了");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

stateless_page.dart

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

class StatelessPage extends StatelessWidget with LifecycleStatelessMixin {
  [@override](/user/override)
  void whenShow() {
    super.whenShow();
    print("LifeNavigatorObserver---Show了");
  }

  [@override](/user/override)
  void whenHide() {
    super.whenHide();
    print("LifeNavigatorObserver---Hide了");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateless Page'),
      ),
      body: Center(
        child: Text('This is a Stateless Page'),
      ),
    );
  }
}