Android笔记：在Flutter中嵌入原生View

在之前的一篇文章中，详情了在原生项目中引入Flutter。

在这个基础上，记录一下在Flutter中引入原生View。（建议先看看上面的文章）

最终的结果就是，在原生项目中，以一个View的方式引入Flutter，再在这个Flutter的View中使用一个原生的View。

效果图如下：

整个界面分成了两部分，上面是Flutter的View，里面有个原生的ImageView。下面是原生的WebView。

开始

首先是MainActivity的布局文件，上面一个FrameLayout用于承载Flutter。

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"                                             xmlns:app="http://schemas.android.com/apk/res-auto"                                             xmlns:tools="http://schemas.android.com/tools"                                             android:layout_width="match_parent"                                             android:layout_height="match_parent"                                             android:background="#000000"                                             tools:context=".MainActivity">    <FrameLayout            android:id="@+id/content"            android:layout_width="match_parent"            android:layout_height="0dp"            app:layout_constraintHeight_percent="0.5"            app:layout_constraintTop_toTopOf="parent"></FrameLayout>    <WebView            android:id="@+id/web"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            app:layout_constraintLeft_toLeftOf="parent"            app:layout_constraintRight_toRightOf="parent"            app:layout_constraintTop_toBottomOf="@id/content"/></android.support.constraint.ConstraintLayout>

Flutter以一个View的方式被装载。

class MainActivity : AppCompatActivity() {    @RequiresApi(Build.VERSION_CODES.LOLLIPOP)    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        enableSlowWholeDocumentDraw()        setContentView(R.layout.activity_main)        val flutterView = Flutter.createView(this@MainActivity,lifecycle,"route1")        ViewRegistrant().registerWith(flutterView.pluginRegistry)        val layout = FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT)        content.addView(flutterView, layout)        initWebView()    }    @SuppressLint("SetJavaScriptEnabled")    private fun initWebView() {        var webSettings = web.settings        webSettings.javaScriptEnabled = true        webSettings.setSupportZoom(false)        web.requestFocusFromTouch()        web.isVerticalScrollBarEnabled = false        web.isHorizontalScrollBarEnabled = false        web.loadUrl("https://www.baidu.com")    }}

使用val flutterView = Flutter.createView(this@MainActivity,lifecycle,"route1")生成一个FlutterView，而后Add到布局中。“route1”会被传入到Flutter中。

第一步

继承PlatformViewFactory在它的create()方法中返回一个在Flutter中要用的原生View。

这里我返回了一个ImageView

class NativeImageView(createArgsCodec: MessageCodec<Any>) : PlatformViewFactory(createArgsCodec) {    override fun create(context: Context, i: Int, o: Any?): PlatformView {        var imageView = ImageView(context)        imageView.layoutParams = ViewGroup.LayoutParams(100, 100)        imageView.background = context.resources.getDrawable(R.mipmap.ic_launcher)        return object : PlatformView {            override fun getView(): View {                return imageView            }            override fun dispose() {            }        }    }}

第二步

写一个桥接器，把上面写好的View传进去。

class ViewRegistrant : PluginRegistry.PluginRegistrantCallback {    override fun registerWith(registry: PluginRegistry) {        val key = ViewRegistrant::class.java.canonicalName        if (registry.hasPlugin(key)) return        val registrar = registry.registrarFor(key)        registrar.platformViewRegistry().registerViewFactory("imageView", NativeImageView(StandardMessageCodec()))    }}

这里的"imageView"，会在Flutter中用到。

第三步

装载桥接器，把桥接器和我们已经创立好的FlutterView进行绑定。

ViewRegistrant().registerWith(flutterView.pluginRegistry)

最后

在Flutter中引用就可。

@override  Widget build(BuildContext context) {    return new Scaffold(      appBar: new AppBar(        title: new Text(widget.title),      ),      body: Container(        color: Color(0xff0000ff),        child: SizedBox(          width: size,          height: size,          child: AndroidView(            viewType: 'imageView',          ),        ),      ),      floatingActionButton: new FloatingActionButton(        onPressed: _changeSize,        child: new Icon(Icons.add),      ),    );

注：此方法需要Android API 20以上，

部分资料图：

最后文末放上一个技术交流群：Android架构设计（185873940）

群内有许多技术大牛，有任何疑问，欢迎广大网友一起来交流，群内还不定期免费分享高阶Android学习视频资料和面试资料包~

再推荐一篇文章，具体的架构视频，面试专题，学习笔记都在这篇文章中：“寒冬未过”，阿里P9架构分享Android必备技术点，让你offer拿到手软！

偷偷说一句：群里高手如云，欢迎大家加群和大佬们一起交流探讨啊！