Flutter2Router从入门到放弃-基本使用、区别&优势

本文转载自微信公众号「微医大前端技术」，作者周建华。转载本文请联系微医大前端技术公众号。

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于做网站、网站设计、关岭网络推广、微信小程序、关岭网络营销、关岭企业策划、关岭品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供关岭建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

前言

Flutter 2 主要带来的新特性有 Null 安全性趋于稳定，桌面和 Web 支持也正式宣布进入 stable 渠道,最受大家关注的就是 Add-to-App 相关的更新，从而改善 Flutter2 之前的版本混合开发体验不好缺点。所谓的 Add-to-App 就是将 Flutter 添加到现有的 iOS 和 Android 应用程序中来利用 Flutter，在两个移动平台上复用 Flutter 代码同时仍保留现有本机代码库的绝佳方法。在此方案出现之前，类似的第三方支持有 flutter_boost 、flutter_thrio 等，但是这些方案都要面对的问题是：非官方的支持必然存在每个版本需要适配的问题，而按照 Flutter 目前更新的速度，很可能每个季度的版本都存在较大的变动，所以如果开发者不维护或者维护不及时，那么侵入性极强的这类框架很容易就成为项目的瓶颈。

Flutter2 多引擎混合开发基本用法

1、先创建一个 Android 原生工程，( Android 原生项目工程创建过程略过)

2、Android 项目创建引入 Flutter Module，使用 File -> New- > New Module … -> 选择 Flutter Module ，然后指定一个 module name，填写相关息，最后点击确定，等待 Gradle sync 完成。

3、Android 项目集成 Flutter Module

1)创建 FlutterEngineGroup 对象，FlutterEngineGroup 可以用来管理多个 FlutterEngine 对象，多个 FlutterEngine 之间是可以共享资源的，这样多个 FlutterEngine 占用的资源相对会少一些，FlutterEngineGroup 需要在 Application onCreate 方法中创建。

 
 
 
 
    
  
  
  
  
  1. package com.zalex.hybird; 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. import android.app.Application; 
    4.   
  
  
  
  4. import io.flutter.embedding.engine.FlutterEngineGroup; 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. public class WYApplication extends Application { 
    7.   
  
  
  
  7.     public FlutterEngineGroup engineGroup; 
    8.   
  
  
  
  8.     @Override 
    9.   
  
  
  
  9.     public void onCreate() { 
    10.   
  
  
  
  10.         super.onCreate(); 
    11.   
  
  
  
  11.         // 创建 FlutterEngineGroup 对象 
    12.   
  
  
  
  12.         engineGroup = new FlutterEngineGroup(this); 
    13.   
  
  
  
  13.     } 
    14.   
  
  
  
  14. } 
    15.

2)创建 WYFlutterEngineManager 缓存管理类,通过 FlutterEngineCache 缓存类，先从中获取缓存的 FlutterEngine，如果没有取到，通过 findAppBundlePath 和 entrypoint 创建出 DartEntrypoint 对象，这里的 findAppBundlePath 主要就是默认的 flutter_assets 目录;而 entrypoint 其实就是 dart 代码里启动方法的名称;也就绑定了在 dart 中 runApp 的方法，再通过 createAndRunEngine 方法创建一个 FlutterEngine，然后缓存起来。

 
 
 
 
    
  
  
  
  
  1. public class WYFlutterEngineManager { 
    2.   
  
  
  
  2.     public static FlutterEngine flutterEngine(Context context, String engineId, String entryPoint) { 
    3.   
  
  
  
  3.         // 1. 从缓存中获取 FlutterEngine 
    4.   
  
  
  
  4.         FlutterEngine engine = FlutterEngineCache.getInstance().get(engineId); 
    5.   
  
  
  
  5.         if (engine == null) { 
    6.   
  
  
  
  6.             // 如果缓存中没有 FlutterEngine 
    7.   
  
  
  
  7.             // 1. 新建 FlutterEngine，执行的入口函数是 entryPoint 
    8.   
  
  
  
  8.            WYApplication app = (WYApplication) context.getApplicationContext(); 
    9.   
  
  
  
  9.            DartExecutor.DartEntrypoint dartEntrypoint = new DartExecutor.DartEntrypoint(FlutterInjector.instance().flutterLoader().findAppBundlePath(), entryPoint); 
    10.   
  
  
  
  10.            engine = app.engineGroup.createAndRunEngine(context, dartEntrypoint); 
    11.   
  
  
  
  11.             // 2. 存入缓存 
    12.   
  
  
  
  12.             FlutterEngineCache.getInstance().put(engineId, engine); 
    13.   
  
  
  
  13.         } 
    14.   
  
  
  
  14.         return engine; 
    15.   
  
  
  
  15.     } 
    16.   
  
  
  
  16. } 
    17.

Activity 绑定 flutter 引擎入口

 
 
 
 
    
  
  
  
  
  1. public class WYFlutterActivity extends FlutterActivity implements EngineBindingsDelegate { 
    2.   
  
  
  
  2.     private WYFlutterBindings flutterBindings; 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.     @Override 
    5.   
  
  
  
  5.     protected void onCreate(@Nullable @org.jetbrains.annotations.Nullable Bundle savedInstanceState) { 
    6.   
  
  
  
  6.         super.onCreate(savedInstanceState); 
    7.   
  
  
  
  7.         flutterBindings = new WYFlutterBindings(this,SingleFlutterActivity.class.getSimpleName(),"main",this); 
    8.   
  
  
  
  8.         flutterBindings.attach(); 
    9.   
  
  
  
  9.     } 
    10.   
  
  
  
  10.     @Override 
    11.   
  
  
  
  11.     protected void onDestroy() { 
    12.   
  
  
  
  12.         super.onDestroy(); 
    13.   
  
  
  
  13.         flutterBindings.detach(); 
    14.   
  
  
  
  14.     } 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16.     @Override 
    17.   
  
  
  
  17.    public FlutterEngine provideFlutterEngine(@NonNull @NotNull Context context)  { 
    18.   
  
  
  
  18.         return flutterBindings.getEngine(); 
    19.   
  
  
  
  19.     } 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21.     @Override 
    22.   
  
  
  
  22.     public void onNext() { 
    23.   
  
  
  
  23.         Intent flutterIntent = new Intent(this, MainActivity.class); 
    24.   
  
  
  
  24.         startActivity(flutterIntent); 
    25.   
  
  
  
  25.     } 
    26.   
  
  
  
  26. } 
    27.

Fragment 绑定 flutter 引擎入口

 
 
 
 
    
  
  
  
  
  1. int engineId = engineId ;//自定义引擎 Id 
    2.   
  
  
  
  2. int fragmentId = 1233444;//自定义 FragmentId 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. FrameLayout flutterContainer = new FrameLayout(this); 
    5.   
  
  
  
  5. root.addView(flutterContainer); 
    6.   
  
  
  
  6. flutterContainer.setId(containerId); 
    7.   
  
  
  
  7. flutterContainer.setLayoutParams(new LinearLayout.LayoutParams( 
    8.   
  
  
  
  8.         FrameLayout.LayoutParams.MATCH_PARENT, 
    9.   
  
  
  
  9.         FrameLayout.LayoutParams.MATCH_PARENT, 
    10.   
  
  
  
  10.         1.0f 
    11.   
  
  
  
  11. )); 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. WYFlutterBindings  flutterBindings = new WYFlutterBindings(this,"WYTopFragment","fragmentMain",this); 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. FlutterEngine engine =  bottomBindings.getEngine(); 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17. FlutterEngineCache.getInstance().put(engineId+"", engine); 
    18.   
  
  
  
  18. Fragment flutterFragment =FlutterFragment.withCachedEngine(engineId+"").build(); 
    19.   
  
  
  
  19. fragmentManager 
    20.   
  
  
  
  20.         .beginTransaction() 
    21.   
  
  
  
  21.         .add(containerId, flutterFragment) 
    22.   
  
  
  
  22.         .commit(); 
    23.

3)flutter 模块引擎入口绑定，除了 main 入口,其他引擎入口都需要加上@pragma('vm:entry-point')注解

 
 
 
 
    
  
  
  
  
  1. void main() => runApp(MyApp(Colors.blue)); 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. @pragma('vm:entry-point') 
    4.   
  
  
  
  4. void fragmentMain() => runApp(CustomApp(Colors.green)); 
    5.

Flutter2多引擎混合开发与单引擎混合开发比较

1、 Flutter 多引擎方案是 flutter api 一直都是可以支持的，可以创建多个引擎，也可以渲染多个不同的界面，也是独立的，但是每次启动一个 flutter 引擎，都会占一个独立的引擎，通过测试可以发现,一个引擎 40M,创建 10 个引擎消耗了 235M，对内存的占用很大，在开发中是不可接受的。

2、由于 Flutter 2 之前版本多引擎的缺陷，业内的做法一般是对 isolate 或 engine 进行复用来解决。影响力较大的是以 FlutterBoost 和 Thrio 为代表的单引擎浏览器方案。即把 Activity/ViewController 作为承载 Dart 页面的浏览器，在页面切换时对单引擎进行 detach/attach，同时通知 Dart 层页面切换，来实现 Engine 的复用。由于只持有了一个 Engine 单例，仅创建一份 isolate，Dart 层是通信和资源共享的，内存损耗也得以有显著的降低。但是单引擎实现依赖于修改官方的 io.flutter 包，对 flutter 框架做出比较大的结构性修改。

3、从 Flutter 2 开始，多引擎下使用 FlutterEngineGroup 来创建新的 Engine，官方宣称内存损耗仅占 180K，其本质是使 Engine 可以共享 GPU 上下文、字形和 isolate group snapshot，从而实现了更快的初始速度和更低的内存占用。

4、Flutter 2 与 Flutter 1 创建引擎的区别:

Flutter1 引擎创建

 
 
 
 
    
  
  
  
  
  1. //Android 
    2.   
  
  
  
  2. val engine = FlutterEngine(this) 
    3.   
  
  
  
  3. engine.dartExecutor.executeDartEntrypoin(DartExecutor.DartEntrypoint.createDefault()) 
    4.   
  
  
  
  4. FlutterEngineCache.getInstance().put(1,engine) 
    5.   
  
  
  
  5. val intent = FlutterActivity.withCacheEngine(1).build(this) 
    6.  
 
 
 
 
 
 
 
    
  
  
  
  
  1. //iOS 
    2.   
  
  
  
  2. let engine = FlutterEngine() 
    3.   
  
  
  
  3. engine.run() 
    4.   
  
  
  
  4. let vc = FlutterViewController(engine:engine,nibName:nil,bundle:nil) 
    5.

Fluter2 引擎创建

 
 
 
 
    
  
  
  
  
  1. //Android 
    2.   
  
  
  
  2. val engineGroup = FlutterEngineGroup(context) 
    3.   
  
  
  
  3. val engine1 = engineGroup.createAndRunDefaultEngine(context) 
    4.   
  
  
  
  4. val engine2 = engineGroup.createAndRunEngine(context,DartExecutor.DartEntrypoint(FlutterInjector.instance().flutterLoader().findAppBundlePath(),"anotherEntrypoint")) 
    5.  
 
 
 
 
 
 
 
    
  
  
  
  
  1. //iOS 
    2.   
  
  
  
  2. let engineGroup = FlutterEngineGroup(name:"example",project:nil) 
    3.   
  
  
  
  3. let engine1 = engineGroup.makeEngine(withEntrypoint:nil,libraryURI:nil) 
    4.   
  
  
  
  4. let engine2 = engineGroup.makeEngine(withEntrypoint:"anotherEntrypoint",libraryURI:nil) 
    5.

5、Flutter 混合开发方案比较

6、Flutter 轻量级多引擎和单引擎优缺点比较

后记 

本文通过代码和表格,我们讲述了 Flutter 2 多引擎使用、多引擎混合开发与单引擎混合开发区别和优缺点比较,下一节我们将一起去学习 Flutter 2 多引擎的实现原理。

网站栏目：Flutter2Router从入门到放弃-基本使用、区别&优势
URL网址：http://www.shufengxianlan.com/qtweb/news31/296181.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App设计知识

各行业网站

H5建站　　 　成都标志设计　　 　校园网站建设方案　　 　成都网站优化　　 　网络推广公司　　 　混凝土搅拌车　　 　营销型网站建设　　 　企业网站建设公司　　 　网络营销公司　　 　成都网创优客　　 　金羊影视传媒　　 　四川成都展柜定制厂家　　 　雕琢时光　　 　和正源建设　　 　成都网站SEO优化公司　　 　顺泽窗帘　　 　成都广告制作　　 　成都网站维护公司　　 　成都防护栏　　 　成都手机网站建设