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

概述在之前的一篇文章中，介绍了在原生项目中引入Flutter。在这个基础上，记录一下在Flutter中引入原生View。（建议先看看上面的文章）最终的结果就是，在原生项目中，以一个View的方式引入Flutter，再在这个Flutter的View中使用一个原生的View。效果图如下：整个界面分成了两部分，上面是Flut

在之前的一篇文章中，介绍了在原生项目中引入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)

技术交流qun：185873940

最后

在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以上，

最后

如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。谢谢。

推荐阅读：“寒冬未过”，阿里P9架构分享Android必备技术点，让你offer拿到手软！

总结

以上是内存溢出为你收集整理的Android笔记：在Flutter中嵌入原生View全部内容，希望文章能够帮你解决Android笔记：在Flutter中嵌入原生View所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。