【Flutter 混合开发】嵌入原生View-Android

蘭得糊塗 發表於 2020-10-14 06:45:00

【Flutter 混合开发】嵌入原生View-Android

<img src="https://img2020.cnblogs.com/other/467322/202010/467322-20201014064503082-1012068586.png">
<blockquote>
Flutter 混合开发系列包含如下：
<ul>
<li>嵌入原生View-Android</li>
<li>嵌入原生View-IOS</li>
<li>与原生通信-MethodChannel</li>
<li>与原生通信-BasicMessageChannel</li>
<li>与原生通信-EventChannel</li>
<li>添加 Flutter 到 Android Activity</li>
<li>添加 Flutter 到 Android Fragment</li>
<li>添加 Flutter 到 iOS</li>
</ul>
每个工作日分享一篇，欢迎关注、点赞及转发。
</blockquote>
<h3 id="androidview">AndroidView</h3>
建议使用 Android Studio 进行开发，在 Android Studio 左侧 project tab下选中 android 目录下任意一个文件，右上角会出现 Open for Editing in Android Studio ，
<img src="https://img2020.cnblogs.com/other/467322/202010/467322-20201014064503598-1819671722.png">
点击即可打开，打开后 project tab 并不是一个 Android 项目，而是项目中所有 Android 项目，包含第三方：
<img src="https://img2020.cnblogs.com/other/467322/202010/467322-20201014064503971-1209369879.png">
app 目录是当前项目的 android 目录，其他则是第三方的 android 目录。
在App 项目的 java/包名 目录下创建嵌入 Flutter 中的 Android View，此 View 继承 PlatformView ：
<pre><code class="language-dart">class MyFlutterView(context: Context) : PlatformView {
override fun getView(): View {
 TODO("Not yet implemented")
}

override fun dispose() {
 TODO("Not yet implemented")
}
}
</code></pre>
<ul>
<li>getView ：返回要嵌入 Flutter 层次结构的Android View</li>
<li>dispose：释放此View时调用，此方法调用后 View 不可用，此方法需要清除所有对象引用，否则会造成内存泄漏。</li>
</ul>
<img src="https://img2020.cnblogs.com/other/467322/202010/467322-20201014064504166-315236155.png">
返回一个简单的 TextView ：
<pre><code class="language-dart">class MyFlutterView(context: Context, messenger: BinaryMessenger, viewId: Int, args: Map<String, Any>?) : PlatformView {

val textView: TextView = TextView(context)

init {
 textView.text = "我是Android View"
}

override fun getView(): View {

 return textView
}

override fun dispose() {
 TODO("Not yet implemented")
}
}
</code></pre>
<ul>
<li>messenger：用于消息传递，后面介绍 Flutter 与原生通信时用到此参数。</li>
<li>viewId：View 生成时会分配一个唯一 ID。</li>
<li>args：Flutter 传递的初始化参数。</li>
</ul>
<h3 id="注册platformview">注册PlatformView</h3>
创建PlatformViewFactory：
<pre><code class="language-dart">class MyFlutterViewFactory(val messenger: BinaryMessenger) : PlatformViewFactory(StandardMessageCodec.INSTANCE) {

override fun create(context: Context, viewId: Int, args: Any?): PlatformView {
 val flutterView = MyFlutterView(context, messenger, viewId, args as Map<String, Any>?)
 return flutterView
}

}
</code></pre>
创建 MyPlugin ：
<pre><code class="language-dart">class MyPlugin : FlutterPlugin {

override fun onAttachedToEngine(binding: FlutterPlugin.FlutterPluginBinding) {
 val messenger: BinaryMessenger = binding.binaryMessenger
 binding
 .platformViewRegistry
 .registerViewFactory(
 "plugins.flutter.io/custom_platform_view", MyFlutterViewFactory(messenger))
}

companion object {
 @JvmStatic
 fun registerWith(registrar: PluginRegistry.Registrar) {
 registrar
 .platformViewRegistry()
 .registerViewFactory(
 "plugins.flutter.io/custom_platform_view",
 MyFlutterViewFactory(registrar.messenger()))
 }
}

override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) {

}
}
</code></pre>
记住 plugins.flutter.io/custom_platform_view ，这个字符串在 Flutter 中需要与其保持一致。
在 App 中 MainActivity 中注册：
<pre><code class="language-dart">class MainActivity : FlutterActivity() {
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
 super.configureFlutterEngine(flutterEngine)
 flutterEngine.plugins.add(MyPlugin())
}
}
</code></pre>
如果是 Flutter Plugin，没有MainActivity，则在对应的 Plugin onAttachedToEngine 和 registerWith 方法修改如下：
<pre><code class="language-dart">public class CustomPlatformViewPlugin : FlutterPlugin,MethodCallHandler {
/// The MethodChannel that will the communication between Flutter and native Android
///
/// This local reference serves to register the plugin with the Flutter Engine and unregister it
/// when the Flutter Engine is detached from the Activity
private lateinit var channel: MethodChannel

override fun onAttachedToEngine(@NonNull flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {
 channel = MethodChannel(flutterPluginBinding.getFlutterEngine().getDartExecutor(), "custom_platform_view")
 channel.setMethodCallHandler(this)

 val messenger: BinaryMessenger = flutterPluginBinding.binaryMessenger
 flutterPluginBinding
 .platformViewRegistry
 .registerViewFactory(
 "plugins.flutter.io/custom_platform_view", MyFlutterViewFactory(messenger))

}

// This static function is optional and equivalent to onAttachedToEngine. It supports the old
// pre-Flutter-1.12 Android projects. You are encouraged to continue supporting
// plugin registration via this function while apps migrate to use the new Android APIs
// post-flutter-1.12 via https://flutter.dev/go/android-project-migration.
//
// It is encouraged to share logic between onAttachedToEngine and registerWith to keep
// them functionally equivalent. Only one of onAttachedToEngine or registerWith will be called
// depending on the user's project. onAttachedToEngine or registerWith must both be defined
// in the same class.
companion object {
 @JvmStatic
 fun registerWith(registrar: Registrar) {
 val channel = MethodChannel(registrar.messenger(), "custom_platform_view")
 channel.setMethodCallHandler(CustomPlatformViewPlugin())

 registrar
 .platformViewRegistry()
 .registerViewFactory(
 "plugins.flutter.io/custom_platform_view",
 MyFlutterViewFactory(registrar.messenger()))
 }
}

override fun onMethodCall(@NonNull call: MethodCall, @NonNull result: Result) {
 if (call.method == "getPlatformVersion") {
 result.success("Android ${android.os.Build.VERSION.RELEASE}")
 } else {
 result.notImplemented()
 }
}

override fun onDetachedFromEngine(@NonNull binding: FlutterPlugin.FlutterPluginBinding) {
 channel.setMethodCallHandler(null)
}
}
</code></pre>
<h3 id="嵌入flutter">嵌入Flutter</h3>
在 Flutter 中调用
<pre><code class="language-dart">class PlatformViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
Widget platformView(){
 if(defaultTargetPlatform == TargetPlatform.android){
 return AndroidView(
 viewType: 'plugins.flutter.io/custom_platform_view',
 );
 }
}
return Scaffold(
 appBar: AppBar(),
 body: Center(
 child: platformView(),
 ),
);
}
}
</code></pre>
上面嵌入的是 Android View，因此通过 defaultTargetPlatform == TargetPlatform.android 判断当前平台加载，在 Android 上运行效果：
<img src="https://img2020.cnblogs.com/other/467322/202010/467322-20201014064504379-1988154117.jpg">
<h3 id="设置初始化参数">设置初始化参数</h3>
Flutter 端修改如下：
<pre><code class="language-dart">AndroidView(
 viewType: 'plugins.flutter.io/custom_platform_view',
 creationParams: {'text': 'Flutter传给AndroidTextView的参数'},
 creationParamsCodec: StandardMessageCodec(),
 )
</code></pre>
<ul>
<li>creationParams ：传递的参数，插件可以将此参数传递给 AndroidView 的构造函数。</li>
<li>creationParamsCodec ：将 creationParams 编码后再发送给平台侧，它应该与传递给构造函数的编解码器匹配。值的范围：
<ul>
<li>StandardMessageCodec</li>
<li>JSONMessageCodec</li>
<li>StringCodec</li>
<li>BinaryCodec</li>
</ul>
</li>
</ul>
修改 MyFlutterView ：
<pre><code class="language-dart">class MyFlutterView(context: Context, messenger: BinaryMessenger, viewId: Int, args: Map<String, Any>?) : PlatformView {

val textView: TextView = TextView(context)

init {
 args?.also {
 textView.text = it["text"] as String
 }
}

override fun getView(): View {

 return textView
}

override fun dispose() {
 TODO("Not yet implemented")
}
}
</code></pre>
最终效果：
<img src="https://img2020.cnblogs.com/other/467322/202010/467322-20201014064504633-847313301.jpg">
<h3 id="flutter-向-android-view-发送消息">Flutter 向 Android View 发送消息</h3>
修改 Flutter 端，创建 MethodChannel 用于通信：
<pre><code class="language-dart">class PlatformViewDemo extends StatefulWidget {
@override
_PlatformViewDemoState createState() => _PlatformViewDemoState();
}

class _PlatformViewDemoState extends State<PlatformViewDemo> {
static const platform =
 const MethodChannel('com.flutter.guide.MyFlutterView');

@override
Widget build(BuildContext context) {
Widget platformView() {
 if (defaultTargetPlatform == TargetPlatform.android) {
 return AndroidView(
 viewType: 'plugins.flutter.io/custom_platform_view',
 creationParams: {'text': 'Flutter传给AndroidTextView的参数'},
 creationParamsCodec: StandardMessageCodec(),
 );
 }
}

return Scaffold(
 appBar: AppBar(),
 body: Column(children: [
 RaisedButton(
 child: Text('传递参数给原生View'),
 onPressed: () {
 platform.invokeMethod('setText', {'name': 'laomeng', 'age': 18});
 },
 ),
 Expanded(child: platformView()),
 ]),
);
}
}
</code></pre>
在原生View 中也创建一个 MethodChannel 用于通信：
<pre><code class="language-dart">class MyFlutterView(context: Context, messenger: BinaryMessenger, viewId: Int, args: Map<String, Any>?) : PlatformView, MethodChannel.MethodCallHandler {

val textView: TextView = TextView(context)
private var methodChannel: MethodChannel

init {
 args?.also {
 textView.text = it["text"] as String
 }
 methodChannel = MethodChannel(messenger, "com.flutter.guide.MyFlutterView")
 methodChannel.setMethodCallHandler(this)
}

override fun getView(): View {

 return textView
}

override fun dispose() {
 methodChannel.setMethodCallHandler(null)
}

override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
 if (call.method == "setText") {
 val name = call.argument("name") as String?
 val age = call.argument("age") as Int?

 textView.text = "hello,$name,年龄：$age"
 } else {
 result.notImplemented()
 }
}
}
</code></pre>
<img src="https://img2020.cnblogs.com/other/467322/202010/467322-20201014064504862-1663917239.gif">
<h3 id="flutter-向-android-view-获取消息">Flutter 向 Android View 获取消息</h3>
与上面发送信息不同的是，Flutter 向原生请求数据，原生返回数据到 Flutter 端，修改 MyFlutterView onMethodCall：
<pre><code class="language-dart">override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
if (call.method == "setText") {
 val name = call.argument("name") as String?
 val age = call.argument("age") as Int?
 textView.text = "hello,$name,年龄：$age"
} else if (call.method == "getData") {
 val name = call.argument("name") as String?
 val age = call.argument("age") as Int?

 var map = mapOf("name" to "hello,$name",
 "age" to "$age"
 )
 result.success(map)
} else {
 result.notImplemented()
}
}
</code></pre>
result.success(map) 是返回的数据。
Flutter 端接收数据：
<pre><code class="language-dart">var _data = '获取数据';

RaisedButton(
child: Text('$_data'),
onPressed: () async {
var result = await platform
 .invokeMethod('getData', {'name': 'laomeng', 'age': 18});
setState(() {
 _data = '${result['name']},${result['age']}';
});
},
),
</code></pre>
<img src="https://img2020.cnblogs.com/other/467322/202010/467322-20201014064505036-1577375267.gif">
<h3 id="解决多个原生view通信冲突问题">解决多个原生View通信冲突问题</h3>
当然页面有3个原生View，
<pre><code class="language-dart">class PlatformViewDemo extends StatefulWidget {
@override
_PlatformViewDemoState createState() => _PlatformViewDemoState();
}

class _PlatformViewDemoState extends State<PlatformViewDemo> {
static const platform =
 const MethodChannel('com.flutter.guide.MyFlutterView');

var _data = '获取数据';

@override
Widget build(BuildContext context) {
Widget platformView() {
 if (defaultTargetPlatform == TargetPlatform.android) {
 return AndroidView(
 viewType: 'plugins.flutter.io/custom_platform_view',
 creationParams: {'text': 'Flutter传给AndroidTextView的参数'},
 creationParamsCodec: StandardMessageCodec(),
 );
 }
}

return Scaffold(
 appBar: AppBar(),
 body: Column(children: [
 Row(
 children: [
 RaisedButton(
 child: Text('传递参数给原生View'),
 onPressed: () {
 platform
 .invokeMethod('setText', {'name': 'laomeng', 'age': 18});
 },
 ),
 RaisedButton(
 child: Text('$_data'),
 onPressed: () async {
 var result = await platform
 .invokeMethod('getData', {'name': 'laomeng', 'age': 18});
 setState(() {
 _data = '${result['name']},${result['age']}';
 });
 },
 ),
 ],
 ),
 Expanded(child: Container(color: Colors.red, child: platformView())),
 Expanded(child: Container(color: Colors.blue, child: platformView())),
 Expanded(child: Container(color: Colors.yellow, child: platformView())),
 ]),
);
}
}
</code></pre>
此时点击 传递参数给原生View 按钮哪个View会改变内容，实际上只有最后一个会改变。
<img src="https://img2020.cnblogs.com/other/467322/202010/467322-20201014064505180-1602548502.gif">
如何改变指定View的内容？重点是 MethodChannel，只需修改上面3个通道的名称不相同即可：
<ul>
<li>第一种方法：将一个唯一 id 通过初始化参数传递给原生 View，原生 View使用这个id 构建不同名称的 MethodChannel。</li>
<li>第二种方法（推荐）：原生 View 生成时，系统会为其生成唯一id：viewId，使用 viewId 构建不同名称的 MethodChannel。</li>
</ul>
原生 View 使用 viewId 构建不同名称的 MethodChannel：
<pre><code class="language-dart">class MyFlutterView(context: Context, messenger: BinaryMessenger, viewId: Int, args: Map<String, Any>?) : PlatformView, MethodChannel.MethodCallHandler {

val textView: TextView = TextView(context)
private var methodChannel: MethodChannel

init {
 args?.also {
 textView.text = it["text"] as String
 }
 methodChannel = MethodChannel(messenger, "com.flutter.guide.MyFlutterView_$viewId")
 methodChannel.setMethodCallHandler(this)
}
...
}
</code></pre>
Flutter 端为每一个原生 View 创建不同的MethodChannel：
<pre><code class="language-dart">var platforms = [];

AndroidView(
viewType: 'plugins.flutter.io/custom_platform_view',
onPlatformViewCreated: (viewId) {
print('viewId:$viewId');
platforms
 .add(MethodChannel('com.flutter.guide.MyFlutterView_$viewId'));
},
creationParams: {'text': 'Flutter传给AndroidTextView的参数'},
creationParamsCodec: StandardMessageCodec(),
)
</code></pre>
给第一个发送消息：
<pre><code class="language-dart">platforms
.invokeMethod('setText', {'name': 'laomeng', 'age': 18});
</code></pre>
<img src="https://img2020.cnblogs.com/other/467322/202010/467322-20201014064505324-1400359542.gif">
<h2 id="交流">交流</h2>
老孟Flutter博客（330个控件用法+实战入门系列文章）：http://laomengit.com
欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://img2020.cnblogs.com/other/467322/202010/467322-20201014064506609-1877459387.png"></td>
<td><img src="https://img2020.cnblogs.com/other/467322/202010/467322-20201014064507027-1155517800.png"></td>
</tr>
</tbody>
</table> 
来源：https://www.cnblogs.com/mengqd/p/13812639.html

頁: [1]

琼殿技术论坛's Archiver

【Flutter 混合开发】嵌入原生View-Android