在Flutter中嵌入原生View

栏目: IOS · Android · 发布时间: 5年前

内容简介:在之前的一篇文章中,介绍了在在这个基础上,记录一下在Flutter中引入原生View。(建议先看看上面的文章)最终的结果就是,在原生项目中,以一个View的方式引入Flutter,再在这个Flutter的View中使用一个原生的View。

在之前的一篇文章中,介绍了在 原生项目中引入Flutter

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

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

效果图如下:

在Flutter中嵌入原生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以上,


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数学世纪

数学世纪

皮耶尔乔治·奥迪弗雷迪 / 胡作玄、胡俊美、于金青 / 上海科学技术出版社 / 2012-1 / 28.00元

《数学世纪:过去100年间30个重大问题》以简短可读的方式论述了整个20世纪的数学。20世纪的数学博大精深,新兴领域及学科的建立发展,许多经典问题得到解决,大量新的有意义的问题的引入,为数学带来了活力。《数学世纪:过去100年间30个重大问题》介绍了数学基础,20世纪的纯粹数学、应用和计算数学,以及目前未解的重要问题,中间穿插了希尔伯特的23个问题的解决情况、菲尔兹奖和沃尔夫奖得主的工作成就等。一起来看看 《数学世纪》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具