农村四月闲人少，勤学苦攻把名扬。这篇文章主要讲述Flutter 专题58 图解 Flutter 嵌入原生 AndroidView 小尝试 #yyds干货盘点#相关的知识，希望能为你提供帮助。
            小菜前段时间学习了一下 Flutter 与原生 Android 之间的交互；是以 Android 为主工程，Flutter 作为 Module 方式进行交互；今天小菜尝试一下 Flutter 中嵌入 Native View 的交互方式；Android 端采用 AndroidView iOS 端采用 UiKitView；小菜仅学习了 AndroidView 的基本用法；

文章图片

源码分析

const androidView( Key key, @required this.viewType, this.onPlatformViewCreated, this.hitTestBehavior = PlatformViewHitTestBehavior.opaque, this.layoutDirection, this.gestureRecognizers, this.creationParams, this.creationParamsCodec, )

1. viewType -> 与 Android 原生交互时唯一标识符，常见形式是包名+自定义名；
2. onPlatformViewCreated -> 创建视图后的回调；
3. hitTestBehavior -> 渗透点击事件，接收范围 opaque > translucent > transparent；
4. layoutDirection -> 嵌入视图文本方向；
5. gestureRecognizers -> 可以传递到视图的手势集合；
6. creationParams -> 向视图传递参数，常为 PlatformViewFactory；
7. creationParamsCodec -> 编解码器类型； 基本用法
   1. viewType a. Android 端
8. 自定义 PlatformView，可根据需求实现 Channel 交互接口；
   

   public class NLayout implements PlatformView private LinearLayout mLinearLayout; private BinaryMessenger messenger; NLayout(Context context, BinaryMessenger messenger, int id, Map< String, Object> params) this.messenger = messenger; LinearLayout mLinearLayout = new LinearLayout(context); mLinearLayout.setBackgroundColor(Color.rgb(100, 200, 100)); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(900, 900); mLinearLayout.setLayoutParams(lp); this.mLinearLayout = mLinearLayout; @Override public View getView()return mLinearLayout; @Override public void dispose()

   
   
9. 创建 PlatformViewFactory 用于生成 PlatformView；
   

   public class NLayoutFactory extends PlatformViewFactory private final BinaryMessenger messenger; public NLayoutFactory(BinaryMessenger messenger) super(StandardMessageCodec.INSTANCE); this.messenger = messenger; @Override public PlatformView create(Context context, int i, Object o) Map< String, Object> params = (Map< String, Object> ) o; return new NLayout(context, messenger, i, params); public static void registerWith(PluginRegistry registry) final String key = "NLayout"; if (registry.hasPlugin(key)) return; PluginRegistry.Registrar registrar = registry.registrarFor(key); registrar.platformViewRegistry().registerViewFactory("com.ace.ace_demo01/method_layout", new NLayoutFactory(registrar.messenger()));

   
   
10. 在 MainActivity 中注册该组件；

    NLayoutFactory.registerWith(this);

    
    b. Flutter 端            创建 AndroidView 并设置与原生相同的 viewType；
    

    return ListView(children: < Widget> [ Container(child: AndroidView(viewType: "com.ace.ace_demo01/method_layout"), color: Colors.pinkAccent, height: 400.0), Container(child: AndroidView(viewType: "com.ace.ace_demo01/method_layout"), color: Colors.greenAccent, height: 200.0) ]);

    
    
    文章图片
    
    

c. 相关小结

1. 小菜对比两个 Container 高度，Container 尺寸大于 AndroidView 对应的原生 View 尺寸时，完全展示；相反小于时则会裁剪 AndroidView 对应的原生 View；
2. 两个 Container 背景色均未展示，小菜理解是 AndroidView 是填充满 Container 的，只是 AndroidView 中展示效果跟原生 View 尺寸相关；
3. AndroidView 中未填充满的部分会展示白色或黑色背景色，与 Android 主题版本 或 设备 相关； 2. creationParams / creationParamsCodec            creationParams 与 creationParamsCodec 一般成对使用，creationParams 为默认传递参数，creationParamsCodec 为编解码器类型；
   

   // Flutter 端 默认传递不同尺寸参数 return ListView(children: < Widget> [ Container(child: AndroidView(viewType: "com.ace.ace_demo01/method_layout0", creationParamsCodec: const StandardMessageCodec(), creationParams: method_layout_size: 150), color: Colors.pinkAccent,height: 400.0), Container(child: AndroidView(viewType: "com.ace.ace_demo01/method_layout0", creationParamsCodec: const StandardMessageCodec(), creationParams: method_layout_size: 450), color: Colors.greenAccent,height: 200.0) ]);

   
   

// Android NLayout
public class NLayout implements PlatformView
private LinearLayout mLinearLayout;
private BinaryMessenger messenger;
private int size = 0;

NLayout(Context context, BinaryMessenger messenger, int id, Map< String, Object> params) this.messenger = messenger; LinearLayout mLinearLayout = new LinearLayout(context); mLinearLayout.setBackgroundColor(Color.rgb(100, 200, 100)); if (params != null & & params.containsKey("method_layout_size")) size = Integer.parseInt(params.get("method_layout_size").toString()); else size = 900; LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(size,size); mLinearLayout.setLayoutParams(lp); this.mLinearLayout = mLinearLayout; @Override public View getView()return mLinearLayout; @Override public void dispose()

#### 3. onPlatformViewCreated & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; **Flutter** 与 **Android** 交互一般借助 **MethodChannel / BasicMessageChannel / EventChannel** 三种方式进行桥接交互；小菜以自定义 **TextView** 进行尝试；**PlatformViewFactory** 基本一致，只是更换初始化和注册的 **N...TextView** 即可；自定义 **N...TextView** 需实现各自的 **Channel** 方式； ##### MethodChannel 方式

// Flutter 端
return Container(height: 80.0, child: AndroidView(
onPlatformViewCreated: (id) async
MethodChannel _channel = const MethodChannel(ace_method_text_view);
_channel..invokeMethod(method_set_text, Method_Channel)..setMethodCallHandler((call)
if (call.method == method_click)
_toast(Method Text FlutterToast!, context);

);
,
viewType: " com.ace.ace_demo01/method_text_view" ,
creationParamsCodec: const StandardMessageCodec(),
creationParams: method_text_str: Method Channel Params!!));
// Android NMethodTextView
public class NMethodTextView implements PlatformView, MethodChannel.MethodCallHandler
private TextView mTextView;
private MethodChannel methodChannel;
private BinaryMessenger messenger;

NMethodTextView(Context context, BinaryMessenger messenger, int id, Map< String, Object> params) this.messenger = messenger; TextView mTextView = new TextView(context); mTextView.setText("我是来自Android的原生TextView"); mTextView.setBackgroundColor(Color.rgb(155, 205, 155)); mTextView.setGravity(Gravity.CENTER); mTextView.setTextSize(16.0f); if (params != null & & params.containsKey("method_text_str")) mTextView.setText(params.get("method_text_str").toString()); this.mTextView = mTextView; methodChannel = new MethodChannel(messenger, "ace_method_text_view"); methodChannel.setMethodCallHandler(this); mTextView.setOnClickListener(new View.OnClickListener() @Override public void onClick(View v) methodChannel.invokeMethod("method_click", "点击！"); Toast.makeText(context, "Method Click NativeToast!", Toast.LENGTH_SHORT).show(); ); @Override public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) if (methodCall != null & & methodCall.method.toString().equals("method_set_text")) mTextView.setText(methodCall.arguments.toString()); result.success("method_set_text_success"); @Override public View getView()return mTextView; @Override public void dispose()methodChannel.setMethodCallHandler(null);

##### BasicMessageChannel 方式

// Flutter 端
return Container(height: 80.0, child: AndroidView(
hitTestBehavior: PlatformViewHitTestBehavior.translucent,
onPlatformViewCreated: (id) async
BasicMessageChannel _channel = const BasicMessageChannel(ace_basic_text_view, StringCodec());
_channel..send(" Basic_Channel" )..setMessageHandler((message)
if (message == basic_text_click)
_toast(Basic Text FlutterToast!, context);

print(===$message.toString()==);
);
,
viewType: " com.ace.ace_demo01/basic_text_view" ,
creationParamsCodec: const StandardMessageCodec(),
creationParams: basic_text_str: Basic Channel Params!!));
// Android NBasicTextView
public class NBasicTextView implements PlatformView, BasicMessageChannel.MessageHandler
private TextView mTextView;
private BasicMessageChannel basicMessageChannel;
private BinaryMessenger messenger;

NBasicTextView(Context context, BinaryMessenger messenger, int id, Map< String, Object> params) this.messenger = messenger; TextView mTextView = new TextView(context); mTextView.setTextColor(Color.rgb(155, 155, 205)); mTextView.setBackgroundColor(Color.rgb(155, 105, 155)); mTextView.setGravity(Gravity.CENTER); mTextView.setTextSize(18.0f); if (params != null & & params.containsKey("basic_text_str")) mTextView.setText(params.get("basic_text_str").toString()); this.mTextView = mTextView; basicMessageChannel = new BasicMessageChannel(messenger, "ace_basic_text_view", StringCodec.INSTANCE); basicMessageChannel.setMessageHandler(this); mTextView.setOnClickListener(new View.OnClickListener() @Override public void onClick(View v) basicMessageChannel.send("basic_text_click"); Toast.makeText(context, "Basic Click NativeToast!", Toast.LENGTH_SHORT).show(); ); @Override public View getView()return mTextView; @Override public void dispose()basicMessageChannel.setMessageHandler(null); @Override public void onMessage(Object o, BasicMessageChannel.Reply reply) if (o != null) mTextView.setText(o.toString()); basicMessageChannel.send("basic_set_text_success");

##### EventChannel 方式

// Flutter 端
return Container(height: 80.0, child: AndroidView(
hitTestBehavior: PlatformViewHitTestBehavior.opaque,
onPlatformViewCreated: (id) async
EventChannel _channel = const EventChannel(ace_event_text_view);
_channel.receiveBroadcastStream(Event_Channel).listen((message)
if (message == event_text_click)
_toast(Event Text FlutterToast!, context);

);
,
viewType: " com.ace.ace_demo01/event_text_view" ,
creationParamsCodec: const StandardMessageCodec(),
creationParams: event_text_str: Event Channel Params!!));
// Android EventChannel
public class NEventTextView implements PlatformView, EventChannel.StreamHandler
private TextView mTextView;
private EventChannel eventChannel;
private BinaryMessenger messenger;

NEventTextView(Context context, BinaryMessenger messenger, int id, Map< String, Object> params) this.messenger = messenger; TextView mTextView = new TextView(context); mTextView.setTextColor(Color.rgb(250, 105, 25)); mTextView.setBackgroundColor(Color.rgb(15, 200, 155)); mTextView.setGravity(Gravity.CENTER); mTextView.setPadding(10, 10, 10, 10); mTextView.setTextSize(20.0f); if (params != null & & params.containsKey("event_text_str")) mTextView.setText(params.get("event_text_str").toString()); this.mTextView = mTextView; eventChannel = new EventChannel(messenger, "ace_event_text_view"); eventChannel.setStreamHandler(this); mTextView.setOnClickListener(new View.OnClickListener() @Override public void onClick(View v) Toast.makeText(context, "Event Click NativeToast!", Toast.LENGTH_SHORT).show(); ); @Override public View getView()return mTextView; @Override public void dispose()eventChannel.setStreamHandler(null); @Override public void onListen(Object o, EventChannel.EventSink eventSink) if (o != null) mTextView.setText(o.toString()); eventSink.success("event_set_text_success"); @Override public void onCancel(Object o)

![5803.png](https://s2.51cto.com/images/20220208/1644287945925662.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)#### 4. gestureRecognizers & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 针对不同的 **View** 需要的手势有所不同，上述 **TextView** 没有设置手势集合，默认支持点击，但对于 **ListView** 之类的需要滑动手势或长按点击的话则需要添加 **gestureRecognizers** 手势集合；

// Flutter 端
return Container(height: 480.0,
child: GestureDetector(
child: AndroidView(
gestureRecognizers: Set()..add(Factory< VerticalDragGestureRecognizer> (() => VerticalDragGestureRecognizer()))
..add(Factory< LongPressGestureRecognizer> (() => LongPressGestureRecognizer())),
hitTestBehavior: PlatformViewHitTestBehavior.opaque,
onPlatformViewCreated: (id) async
MethodChannel _channel = const MethodChannel(ace_method_list_view);
_channel..invokeMethod(method_set_list, 15)..setMethodCallHandler((call)
if (call.method == method_item_click)
_toast(List FlutterToast! position -> $call.arguments, context);
else if (call.method == method_item_long_click)
_toast(List FlutterToast! -> $call.arguments, context);

);
,
viewType: " com.ace.ace_demo01/method_list_view" ,
creationParamsCodec: const StandardMessageCodec(),
creationParams: method_list_size: 10)));
// Android NMethodListView
public class NMethodListView implements PlatformView, MethodChannel.MethodCallHandler, ListView.OnItemClickListener, ListView.OnItemLongClickListener

private Context context; private ListView mListView; private MethodChannel methodChannel; private List< Map< String, String> > list = new ArrayList< > (); private SimpleAdapter simpleAdapter = null; private int listSize = 0; NMethodListView(Context context, BinaryMessenger messenger, int id, Map< String, Object> params) this.context = context; ListView mListView = new ListView(context); if (params != null & & params.containsKey("method_list_size")) listSize = Integer.parseInt(params.get("method_list_size").toString()); if (list != null)list.clear(); for (int i = 0; i < listSize; i++) Map< String, String> map = new HashMap< > (); map.put("id", "current item = " + (i + 1)); list.add(map); simpleAdapter = new SimpleAdapter(context, list, R.layout.list_item, new String[]"id" , new int[]R.id.item_tv ); mListView.setAdapter(simpleAdapter); mListView.setOnItemClickListener(this); mListView.setOnItemLongClickListener(this); this.mListView = mListView; methodChannel = new MethodChannel(messenger, "ace_method_list_view"); methodChannel.setMethodCallHandler(this); @Override public View getView()return mListView; @Override public void dispose()methodChannel.setMethodCallHandler(null); @Override public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) if (methodCall != null & & methodCall.method.toString().equals("method_set_list")) if (list != null)list.clear(); for (int i = 0; i < Integer.parseInt(methodCall.arguments.toString()); i++) Map< String, String> map = new HashMap< > (); map.put("id", "current item = " + (i + 1)); list.add(map); simpleAdapter.notifyDataSetChanged(); result.success("method_set_list_success"); @Override public void onItemClick(AdapterView< ?> parent, View view, int position, long id) methodChannel.invokeMethod("method_item_click", position); Toast.makeText(context, "ListView.onItemClick NativeToast! position -> " + position, Toast.LENGTH_SHORT).show(); @Override public boolean onItemLongClick(AdapterView< ?> parent, View view, int position, long id) methodChannel.invokeMethod("method_item_long_click", list.get(position).get("id")); Toast.makeText(context, "ListView.onItemLongClick NativeToast! " + list.get(position).get("id"), Toast.LENGTH_SHORT).show(); return true;

【Flutter 专题58 图解 Flutter 嵌入原生 AndroidView 小尝试 #yyds干货盘点#】

![5804.png](https://s2.51cto.com/images/20220208/1644287964274467.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)#### 5. hitTestBehavior & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 小菜尝试了数据绑定和手势操作，但重要的一点是数据透传，小菜在 **Flutter / Android** 两端添加了 **Toast** 进行测试； ##### a. opaque & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 使用 **PlatformViewHitTestBehavior.opaque** 方式，两端均可监听处理，小菜理解，若有叠加 **AndroidView** 则不会透传到下一层；注意 **PlatformView** 只可在 **AndroidView** 范围内展示； ##### b. translucent & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 使用 **PlatformViewHitTestBehavior.translucent** 方式，两端均可监听处理，小菜理解，若有叠加 **AndroidView** 则可以透传到下一层； ![5805.jpeg](https://s2.51cto.com/images/20220208/1644287973256626.jpeg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)##### c. transparent & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 使用 **PlatformViewHitTestBehavior.transparent** 方式，两端均不会透传展示； ![5806.jpeg](https://s2.51cto.com/images/20220208/1644287981499660.jpeg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 小菜在测试时，**NMethodListView** 设置高度超过剩余空间高度，例 **Container** 高度设置 **500.0** 可实际屏幕剩余高度只有 **300.0**，因 **transparent** 不会透传，所以 **Flutter** 外层 **ListView** 可以滑动，**NMethodListView** 不会滑动；使用 **opaque / translucent** 方式，**NMethodListView** 可以滑动，**Flutter** 外层 **ListView** 不能滑动，故有 **200.0** 高度展示不出来； ### 小结 1. 使用 **AndroidView** 时，**Android API > 20**； 2. 使用 **AndroidView** 时均需要有界父类； 3. 官网明确提醒，**AndroidView** 方式代价较大，由于是 **GPU -> CPU -> GPU** 有明显的性能缺陷，尽量避免使用； 4. 测试过程中热重载无效，每次均需重新编译； *** & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 小菜对两端的交互理解还不够深入，尤其是专有名词的理解还不到位，如有问题请多多指导！> 来源：阿策小和尚

推荐阅读

• 

  乐苑环游世界第一站（最美的风景在路上“拉萨-林芝”（自驾篇））
• 

  宝宝频繁吃奶的原因
• 

  鱼没有腌好有点腥怎样补救
• 

  Android M(6.0) 权限爬坑之旅
• 

  荣耀9XPro手机无法开机的原因
• 

  新冠疫苗|辉瑞新冠疫苗已致两人死亡，国产疫苗引发全球抢购
• 

  G610手机参数 华为G610还能升级系统吗
• 

  【SpringCloud-Alibaba系列教程】4.服务管理
• 

  redis client有哪些 redis客户端有哪些
• 

  大金中央空调u1故障代码解决步骤,考虑这几点原因
• 

  大商道人物结局
• 

  吃太多香蕉会致人死亡？科学分析香蕉的“毒”
• 

  早上调皮幽默的问候句子 早安调皮句子超棒的幽默早安问候语
• 

  兰花的颜色有哪些特点 兰花的颜色有哪些
• 

  西门子燃气灶点火按压熄火出现这种故障怎么办,主要是看这个指标
• 

  《王者荣耀》“王炸流”狄仁杰崛起,可贴脸站撸铠皇,排位胜率接近90%,应该怎么玩？
• 

  蛙泳怎么提高呼吸技术
• 

  冰箱旁边放植物好养吗? 冰箱上面能放植物吗
• 

  2022长沙市养老金上调发放时间 退休人员养老金上调标准
• 

  灵川县景点

• #私藏项目实操分享# 使用iptable实现: 放行telnet, ftp, web服务,放行samba服务,其他端口服务全部拒绝
• oeasy教您玩转vim - 005 - # 程序本质
• whistle抓包工具的使用介绍
• 知名云计算厂商云宏加入龙蜥社区，共同打造信息安全坚实“地基”
• #yyds干货盘点# Python3 解决 Json 无法解析 datetime 格式数据
• 北亚数据恢复MSSQL 2000 附加数据库提示“错误 823”的数据恢复案例
• 鸿蒙轻内核源码分析（文件系统LittleFS）
• 微服务架构 | 11. 分布式事务 #yyds干货盘点#
• 完整版 笔记汇总 自己用AQS实现一个简单的线程协作器