flutte3.0 framework系列|一文教你完全掌握混合路由管理, 手写mini版 navigator 2.0(Router)

1. 纯flutter路由的原理

表象: 跳转的时候, 在根布局中, 把要显示的的绘制, 不现实的构建而已! (Stack很像)
类似于显示onstage和隐藏offstage, 最核心的原理通过Overlay实现的

原理机制 :
1). 在树的根部, 创建一个map集合,存放名字, 和对应的页面,
2). 跳转的时候, 通过名字, 设置setstate方法, 在build方法里面通过name找到widget, 然后构建它!
但是这样有一个问题: 把widget全部构建了, 而是应该构建需要变动的widget才对!
把这个 MyNavigator 放到 Widget 树的根部：

// 伪代码
class MyNavigator extends StatefulWidget{
  ...
  Map<String,Page> pageMap = ...;
  String currentPage = "one";
  
  void setCurrentPage(String pageName){
    setState(() {
      currentPage = pageName;
    });
  }

  @override
  Widget build(BuildContext context) {
    return pageMap[currentPage];
  }
}

2.纯flutter的路由手写navigate3步

3步:
1). 设计路由容器: ( Stack)

class RouteHostState extends State<RouteHost> with TickerProviderStateMixin {
  List<AnimationController> controllers = [];

  List<Widget> pages = []; //路由中的多个页面
  @override
  void initState() {
    super.initState();
    //初始化路由
    pages.add(RoutePage());
    controllers.add(AnimationController(vsync: this));
  }

  @override
  void dispose() {
    controllers.forEach((e) => e.dispose());
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand, //每个页面撑满屏幕
      children: pages,
    );
  }

2). 提供页面切换方法

  /**
   * 打开一个页面
   */
  void open(Widget page) {
    setState(() {
      //1、创建一个位移动画
      AnimationController animationController;
      Animation<Offset> animation;
      animationController = AnimationController(
          vsync: this, duration: Duration(milliseconds: 500));
      animation = Tween(begin: Offset(1, 0), end: Offset.zero)
          .animate(animationController);
      controllers.add(animationController);

      //2、添加到 stack 中并显示
      pages.add(SlideTransition(
        position: animation,
        child: page,
      ));
      //3、开启转场动画
      animationController.forward();
    });
  }

3). 让子页面使用路由能力 (.findAncestorStateOfType )

class RouteHost extends StatefulWidget {
  @override
  RouteHostState createState() => RouteHostState();

  static RouteHostState of(BuildContext context) {
    return context.findAncestorStateOfType<RouteHostState>();
  }
}

总结: 核心的2点

1. 、Navigator 作为路由容器内部嵌套了 Stack 提供了页面切换的能力。
2. 、通过context.findRootAncestorStateOfType()可以访问父节点

3.overlay原理

相当于图层, 重叠布局
如图:

Overlay: 调用insert, （如果不太熟悉 Overlay 将它当做一个 Stack 就行）
源码和3年前像相差!
Navigator.push()方法 源码分析:

3.1 相关的类深度解析:

1). RenderObjectToWidgetAdapter： Flutter 中的 root widget。
2). MyApp： 我们在void runApp(Widget app)中传入的自定义 Widget。
3). Overlay: 顾名思义，一个可以实现一层层向上覆盖 Widget 的组件,它持有了一个集合List，你可以获取这个 Widget 的引用来向集合中添加组件，使得新的组件覆盖在已有的组件上面。在Navigator体系中，你的Route对象，都将转化为OverlayEntry对象存入这个集合。
4). OverlayEntry: OverlayEntry在图中没有，因为它不是一个 Widget，而是一个纯纯的 Dart 类。Overlay维护的是一个纯 Dart 类集合，最后再根据这个 Dart 类集合去创建 Widget。为什么这样做呢？因为直接操作Widget并不是一件优雅安全的事情，这一点我们再下一节会将。

3.2 Navigator.push()方法深度解析:

onstage和offstage、 push一个进去, 新的page就会是onstage, 其他都是offstage
数据层层传递的问题解决: 就是像状态管理一样!
BuildContext的 ancestor*方法向上查找。

  abstract class BuildContext {
  ///查找父节点中的T类型的State
  T findAncestorStateOfType<T extends State>();
  ///查找父节点中的T类型的 InheritedWidget 例如 MediaQuery 等
  T dependOnInheritedWidgetOfExactType<T extends InheritedWidget>({ Object aspect })
  ///遍历子元素的element对象
  void visitChildElements(ElementVisitor visitor);
  ......
}

过程图:
Navigator---->push()
route---->install()
OverlayState---->insertAll()
wiget---------> setState()
Overlay-------> rebuild();

 static Future<T?> push<T extends Object?>(BuildContext context, Route<T> route) {
    return Navigator.of(context).push(route);
  }
 Future<T?> push<T extends Object?>(Route<T> route) {
    _pushEntry(_RouteEntry(route, pageBased: false, initialState: _RouteLifecycle.push));
    return route.popped;
  }
  void _pushEntry(_RouteEntry entry) {
    assert(!_debugLocked);
    assert(() {
      _debugLocked = true;
      return true;
    }());
    assert(entry.route._navigator == null);
    assert(entry.currentState == _RouteLifecycle.push);
    _history.add(entry);
    _flushHistoryUpdates();
      install(); // 重要的方法
    assert(() {
      _debugLocked = false;
      return true;
    }());
    _afterNavigation(entry.route);
  }

  void install(OverlayEntry insertionPoint) { // 重要的方法
    /// 通过 createOverlayEntries() 创建新页面的 _overlayEntries 集合
    /// 这个 _overlayEntries 集合就是我们打开的新页面
    _overlayEntries.addAll(createOverlayEntries());
    /// 将新页面的 _overlayEntries 集合插入到 overlay 中显示
    navigator.overlay?.insertAll(_overlayEntries, above: insertionPoint);
    super.install(insertionPoint);
  }
  
  Iterable<OverlayEntry> createOverlayEntries() sync* {
    /// 创建一个遮罩
    yield _modalBarrier = OverlayEntry(builder: _buildModalBarrier);
    /// 创建页面实际内容，最终调用到 Route 的 builder 方法
    yield OverlayEntry(builder: _buildModalScope, maintainState: maintainState);
  }

overlay 的方法也很简单，添加页面到 _entries 调用 setState() 更新。集合插入完成后，将触发Overlay的 rebuild。

/// overlay.dart
void insertAll(Iterable<OverlayEntry> entries, { OverlayEntry below, OverlayEntry above }) {
    setState(() { // setstate() 
      _entries.insertAll(_insertionIndex(below, above), entries);
    });
  }

push()方法总结:
1). Flutter通过一个列表List<Route> _history维护所有的路由信息，
2). 整个push过程主要是就是将新的路由添加至这个列表的队尾，并进行相关的回调，
3). 最后返回了一个Future对象。这个Future对象，往往用于页面关闭时候的回调。可以理解push页面是一个带返回值的耗时操作
其他步骤:
1). 新页面添加
2).把新的 overlay绘制,把旧的不绘制
3). 处理相关的监听
路由的动态监听原理:

  MyNavigatorObserver myObserver = MyNavigatorObserver();

  @override
  void initState() {
    super.initState();
    //建议在initState时动态添加Observer，而不是build时，避免重复添加
    Navigator.of(context).widget.observers.add(myObserver);
  }

  @override
  void dispose() {
    super.dispose();
    //dispose时记得移除监听
    Navigator.of(context).widget.observers.remove(myObserver);
  }

问题: 如果你想识别回调中的路由是弹窗还是Page该怎么办?

Route的子类TransitionRoute持有了opaque属性，并且所有的"PageRoute"opaque=true,"PopupRoute"opaque=false。

问题: 动态添加 Widget

问题: 受限于Flutter 独特的编程方式，想要在代码中随时插入一个 Widget 还是比较困难的。

但读过源码的你已经知道了，在MaterialApp中已经预先内置了一个Overlay,虽然它是给 Navigator服务的，但你也完全可以拿来用：

//获取最近的一个Overlay进行操作，如果你没有添加自定义的，通常是`Navigator`的那个
Overlay.of(context).insert(entry);

//获取最靠近根部的Overlay进行操作，通常是`Navigator`的那个
(context.rootAncestorStateOfType(const TypeMatcher<OverlayState>()) as OverlayState).insert(entry);

管理导航栈并没有什么管理, 只是处理了跳转

问题: 原生和flutter混合, 路由是如何管理的?

Flutter 页面有可能会需要跳转到原生页面，而原生页面也可能会需要跳转到 Flutter 页面。这就涉及到了一个新的问题：如何统一管理原生页面和 Flutter 页面跳转交互的混合导航栈。
Flutter 采用单容器多页面, 原生采用单容器单页面（一个 ViewController/Activity 对应一个原生页面）

4.1 从原生页面跳转至 Flutter 页面

add-to-app 混合开发
图片:

原理: 原生页面把flutter封装城一个view, 添加进来即可
对于 Android 而言，则需要多加一步。因为 Flutter 页面的入口并不是原生视图导航栈的最小单位 Activity，而是一个 View（即 FlutterView），所以我们还需要把这个 View 包装到 Activity 的 contentView 中。在 Activity 内部设置页面初始化路由之后，在外部就可以采用打开一个普通的原生视图的方式，打开 Flutter 页面了。

//Android 跳转至 Flutter 页面
 
// 创建一个作为 Flutter 页面容器的 Activity
public class FlutterHomeActivity extends AppCompatActivity {
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // 设置 Flutter 初始化路由页面
    View FlutterView = Flutter.createView(this, getLifecycle(), "defaultRoute"); // 传入路由标识符
    setContentView(FlutterView);// 用 FlutterView 替代 Activity 的 ContentView
  }
}
// 用 FlutterPageActivity 完成页面跳转
Intent intent = new Intent(MainActivity.this, FlutterHomeActivity.class);
startActivity(intent);

4.2 从 Flutter 页面跳转至原生页面

图片:
原理: 通过方法通道解决!
从 Flutter 页面跳转至原生页面，则会相对麻烦些，我们需要考虑以下两种场景：

从 Flutter 页面打开新的原生页面；(打开)
从 Flutter 页面回退到旧的原生页面。(关闭)

4.2.1

2种情况:
1). 原生主页面---->flutter--------->原生A
2). 原生主页面---->flutter--------->返回生主页面

4.2.2

我们需要通过方法通道
因为 Flutter 容器本身属于原生导航栈的一部分，所以当 Flutter 容器内的根页面（即初始化路由页面）需要返回时，我们需要关闭 Flutter 容器，从而实现 Flutter 根页面的关闭。同样，Flutter 并没有提供操作 Flutter 容器的方法，因此我们依然需要通过方法通
问题: 如何从 Flutter 页面回退到原生页面?
接下来，我们一起看看这两个需要通过方法通道实现的方法，即打开原生页面 openNativePage，与关闭 Flutter 页面 closeFlutterPage
Flutter的代码:

void main() => runApp(_widgetForRoute(window.defaultRouteName));
// 获取方法通道
const platform = MethodChannel('samples.chenhang/navigation');
 
// 根据路由标识符返回应用入口视图
Widget _widgetForRoute(String route) {
  switch (route) {
    default:// 返回默认视图
      return MaterialApp(home:DefaultPage());
  }
}
 
class PageA extends StatelessWidget {
  ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
            body: RaisedButton(
                    child: Text("Go PageB"),
                    onPressed: ()=>platform.invokeMethod('openNativePage')// 打开原生页面
            ));
  }
}
 
class DefaultPage extends StatelessWidget {
  ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("DefaultPage Page"),
            leading: IconButton(icon:Icon(Icons.arrow_back), onPressed:() => platform.invokeMethod('closeFlutterPage')// 关闭 Flutter 页面
        )),
        body: RaisedButton(
                  child: Text("Go PageA"),
                  onPressed: ()=>Navigator.push(context, MaterialPageRoute(builder: (context) => PageA())),// 打开 Flutter 页面 PageA
        ));
  }
}

Android 的代码

// 继承 AppCompatActivity 来作为 Flutter 的容器
public class FlutterHomeActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 初始化 Flutter 容器       
        FlutterView flutterView = Flutter.createView(this, getLifecycle(), "defaultPage"); // 传入路由标识符
        // 注册方法通道
        new MethodChannel(flutterView, "samples.chenhang/navigation").setMethodCallHandler(
            new MethodCallHandler() {
                @Override
                public void onMethodCall(MethodCall call, Result result) {
                    // 如果方法名为打开新页面
                    if(call.method.equals("openNativePage")) {
                        // 新建 Intent，打开原生页面
                        Intent intent = new Intent(FlutterHomeActivity.this, SomeNativePageActivity.class);
                        startActivity(intent);
                        result.success(0);
                    }
                    // 如果方法名为关闭 Flutter 页面
                    else if(call.method.equals("closeFlutterPage")) {
                        // 销毁自身 (Flutter 容器)
                        finish();
                        result.success(0);
                    }
                    else {
                        // 方法未实现
                        result.notImplemented();
                    }
                }
            });
        // 将 flutterView 替换成 Activity 的 contentView
        setContentView(flutterView);
    }
}

在 Flutter 容器内部，我们可以使用 Flutter 内部的页面路由机制，通过 Navigator.push 方法，完成从 DefaultPage 到 PageA 的页面跳转；而当我们想从 Flutter 的 PageA 页面跳转到原生页面时，因为涉及到跨引擎的页面路由，所以我们仍然需要利用方法通道来注册打开原生页面的方法，即 openNativePage，让 Flutter 容器接收到这个方法调用时，在原生代码宿主完成原生页面 SomeOtherNativeViewController（iOS 端）与 SomeNativePageActivity（Android 端）的初始化，并最终完成页面跳转。
流程图:

总结:

Flutter 实例的初始化成本非常高昂，每启动一个 Flutter 实例，就会创建一套新的渲染机制，即 Flutter Engine，以及底层的 Isolate。而这些实例之间的内存是不互相共享的，会带来较大的系统资源消耗。

因此我们在实际业务开发中，应该尽量用 Flutter 去开发闭环的业务模块，原生只需要能够跳转到 Flutter 模块，剩下的业务都应该在 Flutter 内部完成，而**尽量避免 Flutter 页面又跳回到原生页面，原生页面又启动新的 Flutter 实例的情况。

4.2.3) .存在的缺点和问题.

Flutter 实例的初始化成本非常高昂，每启动一个 Flutter 实例，就会创建一套新的渲染机制，即 Flutter Engine，以及底层的 Isolate。而这些实例之间的内存是不互相共享的，会带来较大的系统资源消耗。

因此我们在实际业务开发中，应该尽量用 Flutter 去开发闭环的业务模块，原生只需要能够跳转到 Flutter 模块，剩下的业务都应该在 Flutter 内部完成，而尽量避免 Flutter 页面又跳回到原生页面，原生页面又启动新的 Flutter 实例的情况。

为了解决混编工程中 Flutter 多实例的问题，业界有两种解决方案：

• 以今日头条为代表的修改 Flutter Engine 源码，使多 FlutterView 实例对应的多 Flutter Engine 能够在底层共享 Isolate；
• 以闲鱼为代表的共享 FlutterView，即由原生层驱动 Flutter 层渲染内容的方案。

坦白说，这两种方案各有不足：

• 前者涉及到修改 Flutter 源码，不仅开发维护成本高，而且增加了线程模型和内存回收出现异常的概率，稳定性不可控。
• 后者涉及到跨渲染引擎的 hack，包括 Flutter 页面的新建、缓存和内存回收等机制，因此在一些低端机或是处理页面切换动画时，容易出现渲染 Bug。
• 除此之外，这两种方式均与 Flutter 的内部实现绑定较紧，因此在处理 Flutter SDK 版本升级时往往需要耗费较大的适配成本。

综合来说，目前这两种解决方案都不够完美。所以，在 Flutter 官方支持多实例单引擎之前，我们还是尽量在产品模块层面，保证应用内不要出现多个 Flutter 容器实例吧。

4. 3. 混合管理框架如何实现(重点)

方案有2种:

• 多引擎混合栈: 每个 Flutter 页面新建一个 Flutter Engine.
• 单引擎混合栈 : 多个 Flutter 页面共享一个 Flutter Engine.

混合管理方能选行, 主要的混合框架:

go_router: 现在强大的

flutter_boost: 咸鱼: 早期非常有名气,单引擎方案

flutter_thrio 一开始是哈罗单车开源的 add-to-app 集成方案

FlutterEngineGroup: 官方多引擎方案

fluro : https://github.com/lukepighetti/fluro

对比图:

最后

为了能够方便大家快速学习Flutter, 这里整理了Flutter学习路线图以及《Flutter Dart 语言编程入门到精通》&《Flutter实战：第二版》帮助大家配置相关环境，学习Flutter 的基本语法以及最后的项目实际利用。

学习路线：

Dart语言是Flutter的开发语言，所以我们需要掌握Dart语言的基础知识， 由于内容过多，截图展示的目录及部分内容，完整文档领取方式扫描下方二维码即可免费获取！

《Flutter Dart 语言编程入门到精通》

第一章 Dart语言基础

• 环境准备
• 基础语法

第二章 Dart 异步编程

• Dart的事件循环
• 调度任务
• 延时任务
• Future详解
• async和await
• lsolate

第三章 异步之 Stream 详解

• 什么是Stream
• 单订阅流
• 广播流
• Stream Transformer
• 总结

第四章 Dart标准输入输出流

• 文件操作

第五章 Dart 网络编程

• TCP服务端
• TCP客户端
• UDP服务端
• UDP客户端
• HTTP服务器与请求
• WebSocket

第六章 Flutter 爬虫与服务端

• Dart爬虫开发
• Dart服务端
• 创建Flutter项目演示
• 总结

第七章 Dart 的服务端开发

• 注册登录实现

第八章 Dart 调用C语言混合编程

• 环境准备
• 测试Dart ffi接口
• 总结

第九章 LuaDardo中Dart与Lua的相互调用

• Lua C API
• 创建运行时
• Dart调Lua
• Lua调Dart

掌握了Dart语言之后，咱们就可以通过实战来掌握Flutter的知识点， 由于内容过多，截图展示的目录及部分内容，完整文档领取方式扫描下方二维码即可免费获取！

《Flutter实战：第二版》

第一章：起步

• 1.1 移动开发技术简介
• 1.2 初始Flutter
• 1.3 搭建Flutter开发环境
• 1.4 Dart语言简介

第二章：第一个Flutter应用

• 2.1 计数器应用实例
• 2.2 Widget简介
• 2.3 状态管理
• 2.4路由管理
• 2.5包管理
• 2.6 资源管理
• 2.7 调试Flutter应用
• 2.8 Flutter异常捕获

第三章：基础组件

• 3.1 文本及样式
• 3.2 按钮
• 3.3 图片及ICON
• 3.4 单选开关和复选框
• 3.5 输入框及表单
• 3.6 进度指示器

第四章：布局类组件

• 4.1 布局类组件简介
• 4.2 布局原理与约束（constraints）
• 4.3 线性布局（Row和Column）
• 4.4 弹性布局（Flex）
• …

第五章：容器类组件

• 5.1 填充（Padding）
• 5.2 装饰容器（DecoratedBox）
• 5.3 变换（Transform）
• 5.4 容器组件（Container）
• 5.5 剪裁（Clip）
• 5.6 空间适配（FittedBox）
• 5.7 页面骨架（Scaffold）

第六章：可滚动组件

• 6.1 可滚动组件简介
• 6.2 SingleChildScrollView
• 6.3 ListView
• 6.4 滚动监听及控制
• …

第七章：功能型组件

• 7.1 导航返回拦截（WillPopScope）
• 7.2 数据共享（InheritedWidget）
• 7.3 跨组件状态共享
• 7.4 颜色和主题
• 7.5 按需rebuild（ValueListenableBuilder）
• 7.6 异步UI更新（FutureBuilder、StreamBuilder）
• 7.7 对话框详解

第八章：事件处理与通知

• 8.1 原始指针事件处理
• 8.2 手势识别
• 8.3 Flutter事件机制
• 8.4 手势原理与手势冲突
• 8.5 事件总线
• 8.6 通知 Notification

第九章：动画

• 9.1 Flutter动画简介
• 9.2 动画基本结构及状态监听
• 9.3 自定义路由切换动画
• 9.4 Hero动画
• 9.5 交织动画
• 9.6 动画切换组件（AnimatedSwitcher）
• 9.7 动画过渡组件

第十章：自定义组件

• 10.1 自定义组件方法简介
• 10.2 组合现有组件
• 10.3 组合实例：TurnBox
• 10.4 CustomPaint 与 Canvas
• 10.5 自绘实例：圆形背景渐变进度条
• 10.6 自绘组件：CustomCheckbox
• 10.7 自绘组件: DoneWidget
• 10.8 水印实例: 文本绘制与离屏渲染

第十一章：文件操作与网络请求

• 11.1 文件操作
• 11.2 通过HttpClient发起HTTP请求
• 11.3 Http请求库-dio
• 11.4 实例：Http分块下载
• …

第十二章：Flutter扩展

• 12.1 包和插件
• 12.2 Flutter Web

第十三章：国际化

• 13.1 让App支持多语言
• 13.2 实现Localizations
• 13.3 使用Intl包
• 13.4 国际化常见问题

第十四章：Flutter核心原理

• 14.1 Flutter UI 框架（Framework）
• 14.2 Element、BuildContext和RenderObject
• 14.3 Flutter启动流程和渲染管线
• 14.4 布局（Layout）过程
• 14.5 绘制（一）绘制原理及Layer
• …

第十五章：一个完整的Flutter应用

• 15.1 Github客户端示例
• 15.2 Flutter APP代码结构
• 15.3 Model类定义
• 15.4 全局变量及共享状态
• 15.5 网络请求封装
• 15.6 APP入口及主页
• 15.7 登录页
• 15.8 多语言和多主题

由于内容过多，截图展示的目录及部分内容，完整文档领取方式扫描下方二维码即可免费获取！