在之前的一篇文章中，介绍了在原生项目中引入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拿到手软！
偷偷说一句：群里高手如云，欢迎大家加群和大佬们一起交流讨论啊！
网友评论