NA嵌入Flutter页面(1)，12年高级工程师的“飞升之路”

2301_79099287

于 2024-03-29 14:07:39 发布

阅读量865

点赞数 25

分类专栏： 2024年程序员学习文章标签： flutter javascript 开发语言

本文链接：https://blog.csdn.net/2301_79099287/article/details/137143487

版权

2024年程序员学习专栏收录该内容

162 篇文章 0 订阅

订阅专栏

rlFlutter.addView(flutterView, lp);

//flutterEngine.getNavigationChannel().setInitialRoute(“yc”);

// 关键代码，将Flutter页面显示到FlutterView中

// 这个方法的作用就是将Flutter编写的UI页面显示到FlutterView中

// flutterEngine的类型为FlutterEngine，字面意思就是Flutter引擎

// 它负责在Android端执行Dart代码，将Flutter编写的UI显示到FlutterView/FlutterActivity/FlutterFragment中。

flutterView.attachToFlutterEngine(flutterEngine);

// FlutterEngine加载的路由名称为"/"，我们可以通过下面的代码指定初始路由名称

// 传参的情况没有变化，直接在路由名称后面拼接参数就可以

// todo 放在这里不生效，思考为什么

// flutterEngine.getNavigationChannel().setInitialRoute(“yc”);

}

Flutter添加页面
在runApp()方法中通过window.defaultRouteName可以获取到在Flutter.createView()方法中传入的路由名称，即"yc_route"，
之后编写了一个_widgetForRoute()方法，根据传入的route字符串显示相应的Widget。

import ‘dart:ui’;

import ‘package:flutter/material.dart’;

void main() => runApp(_widgetForRoute(window.defaultRouteName));

Widget _widgetForRoute(String route) {

switch (route) {

case ‘yc_route’:

return MyHomePage(title: ‘匹配到了，这个是flutter页面’);

}

3.2 使用新版本FlutterFragment

NA有几种添加方式
FlutterFragment.createDefault()
通过FlutterFragment.createDefault()创建出FlutterFragment，创建出的Fragment显示的路由名称为"/"，如果我们需要指定其他路由名称就不能使用这个方法了。
FlutterFragment.withNewEngine()
通过FlutterFragment.withNewEngine()获取到NewEngineFragmentBuilder对象，使用建造者模式构造出FlutterFragment对象，可以通过initialRoute()方法指定初始路由名称。
使用的withNewEngine()方法从名称上也能看出每次都是创建一个新的FlutterEngine对象来显示Flutter UI，但是从官方文档中可以了解到每个FlutterEngine对象在显示出Flutter UI之前是需要一个warm-up（简单理解为预热）期的，这会导致屏幕呈现短暂的空白，解决方式就是预先创建并启动FlutterEngine，完成warm-up过程，然后将这个FlutterEngine缓存起来，之后使用这个FlutterEngine来显示出Flutter UI。
FlutterFragment.withCachedEngine
执行的FlutterEngineCache.getInstance().put(“my_engine_id”, flutterEngine)就是将FlutterEngine缓存起来，这里传入的"my_engine_id"就相当于缓存名称。
之后调用FlutterFragment.withCachedEngine(“my_engine_id”).build();获取缓存的FlutterFragment对象
NA添加FlutterFragment
在NA创建一个Activity，在onCreate中创建FlutterFragment然后添加到布局中。
Flutter.createFragment()方法传入的参数同样表示路由名称，用于确定Flutter要显示的Widget，返回一个FlutterFragment，该类继承自Fragment，将该Fragment添加到Activity中就可以了。

private void addFlutterView() {

// 通过FlutterFragment引入Flutter编写的页面

// 通过FlutterFragment.createDefault()创建出FlutterFragment

// 需要注意这里的FlutterFragment位于io.flutter.embedding.android包中

//FlutterFragment flutterFragment = FlutterFragment.createDefault();

// 通过FlutterFragment.withNewEngine()获取到NewEngineFragmentBuilder对象

FlutterFragment.NewEngineFragmentBuilder fragmentBuilder = FlutterFragment.withNewEngine();

// 使用建造者模式构造出FlutterFragment对象，可以通过initialRoute()方法指定初始路由名称。

// 传递参数只需要在路由名称后面进行拼接。

FlutterFragment.NewEngineFragmentBuilder initialRoute = fragmentBuilder.initialRoute(“yc”);

FlutterFragment flutterFragment = initialRoute.build();

getSupportFragmentManager()

.beginTransaction()

.add(R.id.rl_flutter, flutterFragment)

.commit();

// 存在的问题

// 使用的withNewEngine()方法从名称上也能看出每次都是创建一个新的FlutterEngine对象来显示Flutter UI，

// 但是从官方文档中我们可以了解到每个FlutterEngine对象在显示出Flutter UI之前

// 是需要一个warm-up（不知道能不能翻译为预热）期的，这会导致屏幕呈现短暂的空白，

// 解决方式就是预先创建并启动FlutterEngine，完成warm-up过程，然后将这个FlutterEngine缓存起来，

// 之后使用这个FlutterEngine来显示出Flutter UI。

// 解决方案看：FlutterFragmentCachedActivity

// 如何获取到FlutterEngine对象呢？FlutterFragment中定义了一个getFlutterEngine()方法，

// 从方法名来看大概就是获取FlutterEngine对象。

// 尝试过创建MethodChannel时传入flutterFragment.getFlutterEngine().getDartExecutor()，

// 运行后会直接抛出空指针异常，异常产生的位置在FlutterFragment的getFlutterEngine()方法中

// 错误原因是这里的delegate为null，全局搜索一下，发现在FlutterFragment的onAttach()方法中会对delegate赋值，也就是说明此时没有执行onAttach()方法。

// 猜测这就是由于上面提到过的FlutterEngine的warm-up机制，这是一个耗时过程，

// 因此FlutterFragment并不会立刻执行onAttach()方法，导致我们在Activity的onCreate()方法中直接使用FlutterFragment的getFlutterEngine()方法会抛出异常。

// todo 调用下面这句话会空指针崩溃

// FlutterEngine flutterEngine = flutterFragment.getFlutterEngine();

}

Flutter添加页面
这个同上

3.3 使用新版本FlutterActivity

原生引入Flutter页面方式
使用FlutterActivity，这里的FlutterActivity也是位于io.flutter.embedding.android包下的。

<activity

android:name=“io.flutter.embedding.android.FlutterActivity”

android:hardwareAccelerated=“true”

android:theme=“@style/AppTheme”

android:windowSoftInputMode=“adjustResize” />

/**

和介绍的创建FlutterFragment的三种方式是对应的
FlutterActivity显示的Flutter路由是在创建Intent对象时指定的,
优点就是使用起来更简单，缺点就是不够灵活,
无法像FlutterView/FlutterFragment那样只是作为原生页面中的一部分展示,
因此这种方式更适合整个页面都是由Flutter编写的场景。

private void test(){

// 方式一、FlutterActivity显示的路由名称为"/"，不可设置

/*startActivity(

FlutterActivity.createDefaultIntent(this)

);*/

// 方式二、FlutterActivity显示的路由名称可设置，每次都创建一个新的FlutterEngine对象

startActivity(

FlutterActivity

.withNewEngine()

.initialRoute(“yc”)

.build(this)

);

// 方式三、FlutterActivity显示的路由名称可设置，使用缓存好的FlutterEngine对象

/*startActivity(

FlutterActivity

.withCachedEngine(“my_engine_id”)

.build(this)

);*/

}

使用这种方式特点
这种方式不需要我们自己创建一个Activity，FlutterActivity显示的Flutter路由是在创建Intent对象时指定的，优点就是使用起来更简单，缺点就是不够灵活，无法像FlutterView/FlutterFragment那样只是作为原生页面中的一部分展示，因此这种方式更适合整个页面都是由Flutter编写的场景。

3.4 补充说明问题

将Flutter版本更新到了1.17，发现上述代码运行后FlutterView无法显示，这个是为什么呢？
和官方提供的示例flutter_view进行了对比，才发现缺少了下面的代码：

@Override

protected void onResume() {

super.onResume();

// flutterEngine.getLifecycleChannel()获取到的是一个LifecycleChannel对象，类比于MethodChannel，

// 作用大概就是将Flutter和原生端的生命周期相互联系起来。

flutterEngine.getLifecycleChannel().appIsResumed();

}

@Override

protected void onPause() {

super.onPause();

flutterEngine.getLifecycleChannel().appIsInactive();

}

@Override

protected void onStop() {

super.onStop();

flutterEngine.getLifecycleChannel().appIsPaused();

}

可能和生命周期有关系
flutterEngine.getLifecycleChannel()获取到的是一个LifecycleChannel对象，类比于MethodChannel，作用大概就是将Flutter和原生端的生命周期相互联系起来。
这里分别在onResume()、onPause()和onStop()方法中调用了LifecycleChannel的appIsResumed()、appIsInactive()和appIsPaused()方法，作用就是同步Flutter端与原生端的生命周期。添加上述代码后，FlutterView就可以正常显示了。
为何在之后版本要添加
可能是FlutterVIew的渲染机制有了一些变化，在接收到原生端对应生命周期方法中发送的通知才会显示，具体原理还是要对比一下现在和以前的源码。

04.如何处理NA跳转flutter传参

4.1 NA如何传递参数给Flutter？

如果需要在页面跳转时传递参数呢，如何在Flutter代码中获取到原生代码中的参数呢？其实很简单，只需要在route后面拼接上参数就可以了。

NavigationChannel navigationChannel = flutterEngine.getNavigationChannel();

String route = “yc?{“name”:“杨充”}”;

navigationChannel.setInitialRoute(route);

FlutterFragment.NewEngineFragmentBuilder fragmentBuilder = FlutterFragment.withNewEngine();

// 使用建造者模式构造出FlutterFragment对象，可以通过initialRoute()方法指定初始路由名称。

// 传递参数只需要在路由名称后面进行拼接。

String route = “yc?{“author”:“杨充”}”;

FlutterFragment.NewEngineFragmentBuilder initialRoute = fragmentBuilder.initialRoute(route);

FlutterFragment flutterFragment = initialRoute.build();

4.2 传递参数注意事项

将路由名称和参数间用“？”隔开，就像浏览器中的url一样，参数使用了Json格式传递，原因就是方便Flutter端解析，而且对于一些复杂的数据，比如自定义对象，使用Json序列化也很好实现。

4.3 Flutter接收传递参数

Widget _widgetForRoute() {

//var route = window.defaultRouteName;

Map<String, dynamic> router = parseRouter();

var route = router[“route”];

switch (route) {

case ‘yc’:

return AboutMePage(title: ‘匹配到了，这个是flutter页面’,params : router);

}

Map<String, dynamic> parseRouter(){

String url = window.defaultRouteName;

// route名称，路由path路径名称

String route = url.indexOf(‘?’) == -1 ? url : url.substring(0, url.indexOf(‘?’));

// 参数Json字符串

String paramsJson = url.indexOf(‘?’) == -1 ? ‘{}’ : url.substring(url.indexOf(‘?’) + 1);

// 解析参数

Map<String, dynamic> params = json.decode(paramsJson);

params[“route”] = route;

return params;

}

通过"?"将路由名称和参数分开，将参数对应的Json字符串解析为Map对象，需要导入dart:convert包。

05.思考遇到的几个问题分析

5.1 setInitialRoute生效问题

//第一种是生效的

private void addFlutterView() {

flutterEngine = new FlutterEngine(this);

binaryMessenger = flutterEngine.getDartExecutor().getBinaryMessenger();

flutterEngine.getNavigationChannel().setInitialRoute(“yc”);

flutterEngine.getDartExecutor().executeDartEntrypoint(

DartExecutor.DartEntrypoint.createDefault()

);

flutterView = new FlutterView(this);

FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(

ViewGroup.LayoutParams.MATCH_PARENT,

ViewGroup.LayoutParams.MATCH_PARENT);

rlFlutter.addView(flutterView, lp);

flutterView.attachToFlutterEngine(flutterEngine);

}

//第二种是不生效的

private void addFlutterView() {

flutterEngine = new FlutterEngine(this);

binaryMessenger = flutterEngine.getDartExecutor().getBinaryMessenger();

flutterEngine.getDartExecutor().executeDartEntrypoint(

DartExecutor.DartEntrypoint.createDefault()

);

flutterView = new FlutterView(this);

FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(

ViewGroup.LayoutParams.MATCH_PARENT,

ViewGroup.LayoutParams.MATCH_PARENT);

rlFlutter.addView(flutterView, lp);

// todo 放在这里不生效，思考为什么

flutterEngine.getNavigationChannel().setInitialRoute(“yc”);

flutterView.attachToFlutterEngine(flutterEngine);

// todo 放在这里不生效，思考为什么

// flutterEngine.getNavigationChannel().setInitialRoute(“yc”);

}

5.2 flutterFragment.getFlutterEngine()空指针

private void createChannel() {

// todo 调用下面这句话会空指针崩溃

FlutterEngine flutterEngine = flutterFragment.getFlutterEngine();

BinaryMessenger binaryMessenger = flutterEngine.getDartExecutor().getBinaryMessenger();

nativeChannel = new MethodChannel(binaryMessenger, METHOD_CHANNEL, StandardMethodCodec.INSTANCE);

}

//源码

@Nullable

public FlutterEngine getFlutterEngine() {

return delegate.getFlutterEngine();

}

错误原因是这里的delegate为null
翻看了一下源码，发现在FlutterFragment的onAttach()方法中会对delegate赋值，也就是说明此时没有执行onAttach()方法。
问题分析
FlutterEngine的warm-up机制，这是一个耗时过程，因此FlutterFragment并不会立刻执行onAttach()方法，导致我们在Activity的onCreate()方法中直接使用FlutterFragment的getFlutterEngine()方法会抛出异常。
如何解决问题
想要解决问题，那就要等到FlutterFragment执行完onAttach()方法在调用getFlutterEngine。那么怎么去监听这个方法执行完呢？

06.Flutter页面关闭时Crash

Caused by: java.lang.RuntimeException: Cannot execute operation because FlutterJNI is not attached to native.

at io.flutter.embedding.engine.FlutterJNI.ensureAttachedToNative(FlutterJNI.java:259)

at io.flutter.embedding.engine.FlutterJNI.onSurfaceDestroyed(FlutterJNI.java:369)

at io.flutter.embedding.engine.renderer.FlutterRenderer.stopRenderingToSurface(FlutterRenderer.java:219)

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip204888 （备注Android）

设计模式学习笔记

设计模式系列学习视频

g-j5VielH1-1711692448257)]
[外链图片转存中…(img-yW0SqKJb-1711692448258)]
[外链图片转存中…(img-kGd1ypo2-1711692448258)]
[外链图片转存中…(img-YUrSto8t-1711692448258)]
[外链图片转存中…(img-nXUY6zU8-1711692448258)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

如果你觉得这些内容对你有帮助，可以添加V获取：vip204888 （备注Android）
[外链图片转存中…(img-UUJreeLU-1711692448259)]

设计模式学习笔记

[外链图片转存中…(img-YEMeVvCe-1711692448259)]

设计模式系列学习视频

[外链图片转存中…(img-yQVaV08O-1711692448259)]

本文已被CODING开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》收录

2301_79099287

关注

25
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
NA嵌入Flutter页面(1)，12年高级工程师的“飞升之路”

/ 关键代码，将Flutter页面显示到FlutterView中// 这个方法的作用就是将Flutter编写的UI页面显示到FlutterView中// flutterEngine的类型为FlutterEngine，字面意思就是Flutter引擎// 它负责在Android端执行Dart代码，将Flutter编写的UI显示到FlutterView/FlutterActivity/FlutterFragment中。
复制链接

扫一扫