关于flutter:Flutter-混合开发嵌入原生ViewAndroid

38次阅读

共计 9952 个字符，预计需要花费 25 分钟才能阅读完成。

Flutter 混合开发系列 蕴含如下：

  • 嵌入原生 View-Android
  • 嵌入原生 View-IOS
  • 与原生通信 -MethodChannel
  • 与原生通信 -BasicMessageChannel
  • 与原生通信 -EventChannel
  • 增加 Flutter 到 Android Activity
  • 增加 Flutter 到 Android Fragment
  • 增加 Flutter 到 iOS

每个工作日分享一篇，欢送关注、点赞及转发。

AndroidView

倡议应用 Android Studio 进行开发，在 Android Studio 左侧 project tab 下选中 android 目录下任意一个文件，右上角会呈现 Open for Editing in Android Studio，

点击即可关上，关上后 project tab 并不是一个 Android 我的项目，而是我的项目中所有 Android 我的项目，蕴含第三方：

app 目录是以后我的项目的 android 目录，其余则是第三方的 android 目录。

在 App 我的项目的 java/ 包名 目录下创立嵌入 Flutter 中的 Android View，此 View 继承 PlatformView：

class MyFlutterView(context: Context) : PlatformView {override fun getView(): View {TODO("Not yet implemented")
    }

    override fun dispose() {TODO("Not yet implemented")
    }
}
  • getView：返回要嵌入 Flutter 层次结构的 Android View
  • dispose：开释此 View 时调用，此办法调用后 View 不可用，此办法须要革除所有对象援用，否则会造成内存透露。

返回一个简略的 TextView：

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")
    }
}
  • messenger：用于消息传递，前面介绍 Flutter 与 原生通信时用到此参数。
  • viewId：View 生成时会调配一个惟一 ID。
  • args：Flutter 传递的初始化参数。

注册 PlatformView

创立 PlatformViewFactory：

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
    }

}

创立 MyPlugin：

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) {}}

记住 plugins.flutter.io/custom_platform_view，这个字符串在 Flutter 中须要与其保持一致。

在 App 中 MainActivity 中注册：

class MainActivity : FlutterActivity() {override fun configureFlutterEngine(flutterEngine: FlutterEngine) {super.configureFlutterEngine(flutterEngine)
        flutterEngine.plugins.add(MyPlugin())
    }
}

如果是 Flutter Plugin，没有 MainActivity，则在对应的 Plugin onAttachedToEngine 和 registerWith 办法批改如下：

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)
    }
}

嵌入 Flutter

在 Flutter 中调用 

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(),
      ),
    );
  }
}

下面嵌入的是 Android View，因而通过 defaultTargetPlatform == TargetPlatform.android 判断以后平台加载，在 Android 上运行成果：

设置初始化参数

Flutter 端批改如下：

AndroidView(
          viewType: 'plugins.flutter.io/custom_platform_view',
          creationParams: {'text': 'Flutter 传给 AndroidTextView 的参数'},
          creationParamsCodec: StandardMessageCodec(),)
  • creationParams：传递的参数，插件能够将此参数传递给 AndroidView 的构造函数。

  • creationParamsCodec：将 creationParams 编码后再发送给平台侧，它应该与传递给构造函数的编解码器匹配。值的范畴：

    • StandardMessageCodec
    • JSONMessageCodec
    • StringCodec
    • BinaryCodec

批改 MyFlutterView：

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")
    }
}

最终成果：

Flutter 向 Android View 发送音讯

批改 Flutter 端，创立 MethodChannel 用于通信：

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()),
      ]),
    );
  }
}

在 原生 View 中也创立一个 MethodChannel 用于通信：

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()
        }
    }
}

Flutter 向 Android View 获取音讯

与下面发送信息不同的是，Flutter 向原生申请数据，原生返回数据到 Flutter 端，批改 MyFlutterView onMethodCall：

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()
    }
}

result.success(map) 是返回的数据。

Flutter 端接收数据：

var _data = '获取数据';

RaisedButton(child: Text('$_data'),
  onPressed: () async {
    var result = await platform
        .invokeMethod('getData', {'name': 'laomeng', 'age': 18});
    setState(() {_data = '${result['name']},${result['age']}';
    });
  },
),

解决多个原生 View 通信抵触问题

当然页面有 3 个原生 View，

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())),
      ]),
    );
  }
}

此时点击 传递参数给原生 View 按钮哪个 View 会扭转内容，实际上只有最初一个会扭转。

如何扭转指定 View 的内容？重点是 MethodChannel，只需批改下面 3 个通道的名称不雷同即可：

  • 第一种办法 ：将一个惟一 id 通过初始化参数传递给原生 View，原生 View 应用这个 id 构建不同名称的 MethodChannel。
  • 第二种办法（举荐）：原生 View 生成时，零碎会为其生成惟一 id：viewId，应用 viewId 构建不同名称的 MethodChannel。

原生 View 应用 viewId 构建不同名称的 MethodChannel：

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)
    }
  ...
}

Flutter 端为每一个原生 View 创立不同的 MethodChannel：

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(),)

给第一个发送音讯：

platforms[0]
    .invokeMethod('setText', {'name': 'laomeng', 'age': 18});

交换

老孟 Flutter 博客（330 个控件用法 + 实战入门系列文章）：http://laomengit.com

欢送退出 Flutter 交换群（微信：laomengit）、关注公众号【老孟 Flutter】：

正文完
flutter
发表至： flutter
2020-10-14
 0
关于flutter:参与-2023-第二季度官方-Flutter-开发者调查
关于flutter:在-Flutter-中创建一个动画屏幕
关于flutter:Dart-List-用法小结
关于flutter:Flutter-22-现已发布