Flutter路由管理插件flutter_router_forzzh的使用

Flutter路由管理插件flutter_router_forzzh的使用

前言：

在Flutter开发中，很多时候需要你的页面像Android中的Activity/Fragment一样具备生命周期的特性，以便进行懒加载以提升部分性能和用户体验。然而，在Flutter中，StatelessWidget 和 StatefulWidget 并不具备检测页面是否运行在前台、后台或被销毁的功能。尽管StatefulWidget中有销毁时的dispose()回调，但这对于检查前后台状态来说仍然不够。因此，我们引入了flutter_router_forzzh插件，它可以让StatelessWidget和StatefulWidget具备类似Android中Activity/Fragment的onResume、onPause、onDestroy生命周期。

该库已经将原来的页面跳转工具和生命周期功能独立拆开，不再耦合，可以分别使用。

pubspec.yaml 依赖

dependencies:
  flutter_router_forzzh: ^0.0.6

导包

import 'package:flutter_router_forzzh/router_lib.dart';

功能1：路由功能实现界面跳转

顶层定义router方便全局使用

RouterProxy router = RouterProxy.getInstance(
    routePathCallBack: (routeInformation) {
      /// 自定义的动态路由 跳转
      if (routeInformation.location == 'TaoBaoPageDetail1') {
        return TaoBaoPageDetail();
      }
    },
    pageMap: {
      '/': const Login(),
      'TaoBaoPageDetail':  TaoBaoPageDetail(),
    },
    exitStyleCallBack: (context) {
      return _confirmExit(context);
    }
);

MaterialApp.router 注册RouterProxy

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'router_lifecycle',
      debugShowCheckedModeBanner: false,
      routerDelegate: router, // 绑定路由跳转工具
      routeInformationParser: router.defaultParser(), // 路由解析器, 可自定义传入
    );
  }
}

// 页面的跳转使用 router.push(); router.pushNamed()等
// 页面的关闭使用 router.pop();

功能2：对需要监听生命周期的页面做任务

StatefulWidget页面

StatelessWidget页面

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LifeCycle(
      onCreate: () {
        print("--------Login onCreate");
      },
      onStart: () {
        print("--------Login onStart");
      },
      onResume: () {
        print("--------Login onResume");
      },
      onPause: () {
        print("--------Login onPause");
      },
      onDestroy: () {
        print("--------Login onDestroy");
      },
      child: Scaffold(
        body: Stack(
          children: [
            Container(
              constraints: const BoxConstraints.expand(),
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      const SizedBox(
                        width: 16,
                      ),
                      ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          primary: Theme.of(context).primaryColor,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(4.0),
                          ),
                          side: BorderSide(
                              color: Theme.of(context).primaryColor),
                        ),
                        onPressed: () {},
                        child: const Text(
                          '注册',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                      const SizedBox(
                        width: 16,
                      ),
                      ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          primary: Colors.white,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(4.0),
                          ),
                          side: const BorderSide(color: Colors.black),
                        ),
                        onPressed: () {
                          router.push(page: NavPage());
                        },
                        child: const Text('登录', style: TextStyle(color: Colors.black),),
                      ),
                      const SizedBox(
                        width: 16,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        )
      ),
    );
  }
}

其他注意事项

1. exitStyleCallBack 可自定义退出程序提示框。
2. 在Web端，如果需要支持浏览器直接跳转访问某页面，需要自定义 routeInformationParser 并继承 RouteParser 类作为解析器。

效果展示

完整示例Demo

import 'package:flutter/material.dart';
import 'package:flutter_router_forzzh/router_lib.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'router_lifecycle',
      debugShowCheckedModeBanner: false,
      routerDelegate: router,
      routeInformationParser: router.defaultParser(),
    );
  }
}