4.flutte3.0 framework系列|一文教你完全掌握

作者: 鹏城十八少 | 来源:发表于2024-01-29 17:36 被阅读0次

Android开发必看：一文教你完全理解DataBinding框
SDK系列-FrameWork的制作(1)
SDK系列-iOS FrameWork制作概述
SDK系列-FrameWork制作(2)
学习资料
教你步步为营掌握自定义ViewGroup
面试有感：思想比做过更重要
手把手教你创建Framework
干货 | 教你一文掌握数据预处理
一文教你掌握广义估计方程

目录:
1.纯flutter的路由原理
2.纯flutter的路由手写navigate3步
3.overlay原理
4.1.从原生页面跳转至 Flutter 页面
4.2. 从 Flutter 页面跳转至原生页面
4.2.1).从 Flutter 页面打开新的原生页面；
4.2. 2). 从 Flutter 页面回退到旧的原生页面。
4.2.3) .存在的缺点和问题

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

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点

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

3.overlay原理

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

导航over.jpg

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<OverlayEntry>，你可以获取这个 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<dynamic>> _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 混合开发
图片:

导航混合.jpg

原理: 原生页面把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 端）的初始化，并最终完成页面跳转。
流程图:

交互.jpg

总结:

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

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

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

因此我们在实际业务开发中，应该尽量用 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

对比图:

混合路由比较.jpg

Android开发必看：一文教你完全理解DataBinding框
前情 Android开发必看：一文教你完全理解DataBinding框架（上）[https://www.jians...
SDK系列-FrameWork的制作(1)
SDK系列-iOS FrameWork制作概述SDK系列-FrameWork的制作(1)SDK系列-FrameWo...
SDK系列-iOS FrameWork制作概述
SDK系列-iOS FrameWork制作概述SDK系列-FrameWork的制作(1)SDK系列-FrameWo...
SDK系列-FrameWork制作(2)
SDK系列-iOS FrameWork制作概述SDK系列-FrameWork的制作(1)SDK系列-FrameWo...
学习资料
Android博客Andorid_CSDN系列FrameWork_gityuan系列weishu系列 Androi...
教你步步为营掌握自定义ViewGroup
本篇是《教你步步为营掌握自定义View》一文的姊妹篇。一、自定义ViewGroup必须清楚的基本原理在学习一个...
面试有感：思想比做过更重要
面试过几个做android framework的工作后发现，基本上问的是android framework掌握的熟...
手把手教你创建Framework
上一篇文章《手把手教你创建静态库》教你如何创建静态库，这一片将“手把手”教你创建Framework，相对于静态库，...
干货 | 教你一文掌握数据预处理
关注公众号“Python数据分析实战与AI干货”，二维码在文末~ 满满干货等你来～数据分析一定少不了数据预处理，...
一文教你掌握广义估计方程
广义估计方程是一种研究纵向数据（比如重复测量数据，面板数据）的方法。同一测量对象的多次测量数据结果之间很可能有着...