Flutter路由生命周期管理插件route_lifecycle的使用

route_lifecycle 是一种新的管理路由生命周期的方法。

安装

添加到pubspec.yaml文件

最新版本是：

dependencies:
  route_lifecycle: $latest_version

在Dart代码中导入

import 'package:route_lifecycle/route_lifecycle.dart';

使用

配置navigatorObservers

在MaterialApp中添加navigatorObservers来监听路由生命周期事件。

MaterialApp(
  navigatorObservers: [
    ...
    RouteMixin.getRouteLifecycleObserver(),
  ],
);

使用RouteMixin<T>

在需要管理路由生命周期的类中使用RouteMixin<T>。

class _HomePageState extends State<HomePage> with RouteMixin<HomePage> {
  [@override](/user/override)
  String getRouteName() {
    return "/main";
  }

  [@override](/user/override)
  void init() {
    super.init();
  }

  [@override](/user/override)
  void resume() {
    super.resume();
  }

  [@override](/user/override)
  void stop() {
    super.stop();
  }

  [@override](/user/override)
  void inactive() {
    super.inactive();
  }
}

示例代码

以下是一个完整的示例代码，展示了如何使用route_lifecycle插件来管理路由生命周期。

main.dart

/// [@author](/user/author) newtab on 2021/5/7

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:route_lifecycle/route_lifecycle.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        "/main": (context) => HomePage(),
        "/a2": (context) => HomePage2(),
        "/a3": (context) => Home3Page(),
      },
      initialRoute: "/main",
      navigatorObservers: [
        RouteMixin.getRouteLifecycleObserver(),
      ],
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage> with RouteMixin<HomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: InkWell(
        onTap: () {
          Navigator.of(context).pushNamed("/a2");
        },
        child: Container(
          child: Center(
            child: Text("11111111111"),
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  String getRouteName() {
    return "/main";
  }

  [@override](/user/override)
  void init() {
    super.init();
  }

  [@override](/user/override)
  void resume() {
    super.resume();
  }

  [@override](/user/override)
  void stop() {
    super.stop();
  }

  [@override](/user/override)
  void inactive() {
    super.inactive();
  }
}

class HomePage2 extends StatefulWidget {
  const HomePage2({Key? key}) : super(key: key);

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

class _HomePage2State extends State<HomePage2> with RouteMixin<HomePage2> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: InkWell(
        onTap: () {
          Navigator.of(context).pushNamed("/a3");
        },
        child: Container(
          child: Center(
            child: Text("2222222222222222"),
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  void init() {
    super.init();
    print(".....${getRouteName()} init");
  }

  [@override](/user/override)
  String getRouteName() {
    return "/a2";
  }

  [@override](/user/override)
  void stop() {
    super.stop();
    print(".....${getRouteName()} stoped");
  }

  [@override](/user/override)
  void resume() {
    print(".....${getRouteName()} resumed");
    super.resume();
  }

  [@override](/user/override)
  void inactive() {
    print(".....${getRouteName()} inactive");
    super.inactive();
  }
}

class Home3Page extends StatefulWidget {
  const Home3Page({Key? key}) : super(key: key);

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

class _Home3PageState extends State<Home3Page> with RouteMixin<Home3Page> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: InkWell(
        onTap: () {
          Navigator.of(context)
              .popUntil((route) => route.settings.name == "/main");
        },
        child: Container(
          child: Center(
            child: Text("33333333"),
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  String getRouteName() {
    return "/a3";
  }

  [@override](/user/override)
  void resume() {
    print(".....${getRouteName()} resumed");
    super.resume();
  }

  [@override](/user/override)
  void stop() {
    print(".....${getRouteName()} stoped");
    super.stop();
  }

  [@override](/user/override)
  void inactive() {
    print(".....${getRouteName()} inactive");
    super.inactive();
  }

  [@override](/user/override)
  void init() {
    super.init();
    print(".....${getRouteName()} init");
  }
}