Flutter路由——Navigator2.0

原创

已于 2023-06-09 14:58:51 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

于 2023-06-08 16:30:38 首次发布

文章介绍了Flutter的Navigator2.0如何管理路由状态，重点讨论了Page、Router和RouterDelegate三个核心API的作用。RouterDelegate负责定义路由行为，RouteInformationParser解析路由信息，当系统打开新页面时，这两者与Router协作更新和构建导航器实例，展示页面。

Navigator 2.0提供了一系列全新的接口，可以实现将路由状态成为应用状态的一部分，新增的API如下：

Page:用来表示Navigator路由栈中各个页面的不可变对象，Page是一个抽象类通常使用它的派生类：MaterialPage或CupertinoPage;
Router:用来配置要用Navigator展示的页面列表，通常该页面列表会根据系统或应用程序的状态改变而改变，除了直接使用Router本身外还可以使用MaterialApp.router()来创建Router;
RouterDelegate:定义应用程序中的路由行为，例如Router如何知道应用程序状态的变化以及如何响应，监听RouteInformationParser和应用状态，并使用当前列表来构建Pages;
RouteInformationParser:可缺省，主要应用于web，持有RouteInformationProvider提供的RouteInformation,可以将其解析为我们定义的数据类型；
BackButtonDispatcher:响应后退按钮，并通知Router;

上面的API中BackButtonDispatcher很少用到，对于移动端来说，只需要用到Page、Router和RouterDelegate这三个API即可。

RouterDelegate与Router、RouteInformationParser在一起的交互和应用程序的状态如下：
在这里插入图片描述

1.当系统打开一个新页面时，RouteInformationParser会将其转换为应用中的具体数据类型T；
2.该数据类型会被传递给RouterDelegate的setNewRoutePath方法，我们可以在这里更新路由状态；
3.notifyListeners会通知Router重建RouterDelegate;
4.RouterDelegate.build()返回一个新的Navigator实例，并最终展示出打开的页面；

代码实例：

/// @description hu
import 'package:flutter/material.dart';
import 'package:up_china/model/video_model.dart';
import 'package:up_china/page/home_page.dart';
import 'package:up_china/page/video_detail_page.dart';

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

class UPApp extends StatefulWidget {
   
   
  @override
  State<StatefulWidget> createState() => _UPAppState();
}

class _UPAppState extends State<UPApp> {
   
   
  UPRouteDelegate _routerDelegate =