全网最简单的Flutter Navigator2.0路由指南

关于Flutter路由的一些原理，可以阅读我们之前的文章《Flutter 路由源码剖析》，本文我们主要来学习一下Navigator2.0的用法。
为了演示Navigator2.0的用法，这里准备了一个简单案例，项目下载 访问这里。
nav_demo目录是一个使用Navigator1.0的示例，总共4个页面，分别是：splash、login、home、details代码结构如下：

核心代码：

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

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigator 1.0',
routes: <String, WidgetBuilder> {
'/login': (_) => const Login(),
'/home': (_) => const Home(),
},
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const Splash(),
);
}
}

Navigator1.0 存在的几个问题：

静态路由不方便给构造函数传参，不如动态路由灵活。如不考虑使用第三方路由框架时，常常会存在静态路由和动态路由一起使用的情况。如下代码，点击网格项，拉起详情页
GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(
builder: (ctx) => Details(
_movieList![i].name, _movieList![i].imgUrl)));
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(child: Image.network(_movieList![i].imgUrl)),
Text(_movieList![i].name),
],
),
);
难以处理Web版上，地址栏URL做路由导航的需求。如下图，切换路由，地址栏没有变化

对路由的控制极不灵活，譬如对路由嵌套的场景需求；处理Android返回键需求等
编程风格不统一。Navigator 1.0是一种命令式编程范式，而Flutter本身是一种声明式的编程范式。Navigator 2.0回归声明式的范式，更具Flutter的味道。
使用Navigator 2.0重构
这里，我先以一种最少的修改，最简单的使用方式来重构，看看Navigator 2.0是如果使用的
修改代码结构：

仅添加router文件夹，新增delegate.dart文件。在其中自定义类MyRouterDelegate继承自RouterDelegate，并混入ChangeNotifier和PopNavigatorRouterDelegateMixin。
这里有三个方法必须实现：

class MyRouterDelegate extends RouterDelegate<List<RouteSettings>> with ChangeNotifier, PopNavigatorRouterDelegateMixin<List<RouteSettings>> {

final List<Page> _pages = [];

@override
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

@override
Widget build(BuildContext context) {
return Navigator(
key: navigatorKey,
pages: List.of(_pages),
onPopPage: _onPopPage,
);
}

@override
Future<void> setNewRoutePath(List<RouteSettings> configuration) async {}

/// ………………省略部分代码………………
}

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」

赞(1) 打赏

一分也是爱

支付宝扫一扫打赏

微信扫一扫打赏