flutter嵌入原生组件_Flutter之Flutter布局中加入原生View

在先前的两篇文章中，介绍了flutter 与原生android通信，以及在原有工程中加入flutter view或是flutter的新页面。

flutter功能很强大不仅仅有自己的ui库，也能像rn那样封装原生view来实现更好的ui，地图和webview和相机就是觉见的封装。

在这里先用textview文本组件举例，效果图如图一。

图一

在Android工程中编写并注册原生组件

添加原生组件的流程基本是这样的：

1.实现原生组件PlatformView提供原生view

2.创建PlatformViewFactory用于生成PlatformView

3.创建FlutterPlugin用于注册原生组件

实现原生组件PlatformView提供原生view

在这里我定义一个myview的类，实现PlatformView(flutter定义的接口类，如图二)。

图二

MyView.java

import io.flutter.plugin.common.BinaryMessenger;

import io.flutter.plugin.common.MethodCall;

import io.flutter.plugin.common.MethodChannel;

import io.flutter.plugin.platform.PlatformView;

public class MyView implements PlatformView , MethodChannel.MethodCallHandler{

private final TextView natvieTextView;

Context context;

public MyView(Context context, BinaryMessenger messenger, int id, Map params) {

this.context = context;

TextView myNativeView = new TextView(context);

myNativeView.setText("我是来自Android的原生TextView");

if (params.containsKey("myContent")) {

String myContent = (String) params.get("myContent");

myNativeView.setText(myContent);

}

this.natvieTextView = myNativeView;

MethodChannel methodChannel = new MethodChannel(messenger, "plugins.nightfarmer.top/myview_" + id);

methodChannel.setMethodCallHandler(this);

}

@Override

public View getView() {

return natvieTextView;

}

@Override

public void dispose() {

}

@Override

public void onMethodCall(MethodCall call, MethodChannel.Result result) {

if ("setText".equals(call.method)) {

String text = (String) call.arguments;

natvieTextView.setText(text);

result.success(null);

Intent intent = new Intent();

intent.setClass(context, LoginActivity.class);

context.startActivity(intent);

}

}

}

MyView中onMethodCall是用于处理flutter与原生view交互的，如果不需要交互的话可以不用实现MethodChannel.MethodCallHandler。

创建PlatformViewFactory用于生成PlatformView

package com.woshiku.flutter_rn.plugin;

import com.woshiku.flutter_rn.factory.MyViewFactory;

import io.flutter.plugin.common.PluginRegistry;

public class MyViewFlutterPlugin {

public static void registerWith(PluginRegistry registry) {

final String key = MyViewFlutterPlugin.class.getCanonicalName();

if (registry.hasPlugin(key)) return;

PluginRegistry.Registrar registrar = registry.registrarFor(key);

registrar.platformViewRegistry().registerViewFactory("plugins.woshiku.top/myview", new MyViewFactory(registrar.messenger()));

}