前言
Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。目前，Flutter已推出稳定的2.0版本。也是目前最火的跨平台开发工具之一
创建AndroidView
将Flutter中的Android项目使用AndroidStudio打开，然后在app的包名下新建一个View实现io.flutter.plugin.platform.PlatformView接口，使用PlatformView就可以将AndroidView嵌入到Flutter视图中去，由于需要进行视图对象创建所以在构造函数添加context
-
getView返回你需要嵌入的AndroidView -
dispose调用此方法后，PlatformView对象将不可用。调用此方法后，实现PlatformView的插件必须清除对View对象和PlatformView的所有引用。 如果不这样做将导致内存泄漏。
import android.content.Context
import android.widget.TextView
import io.flutter.plugin.platform.PlatformView
class CustomerView(context: Context):PlatformView {
val textView: TextView = TextView(context).apply {
text = "Test View in Android "
}
override fun getView() = textView
override fun dispose() {
}
}
注册AndroidView
新建一个类继承自PlatformViewFactory，在其中创建我们的View
import android.content.Context
import io.flutter.plugin.common.StandardMessageCodec
import io.flutter.plugin.platform.PlatformView
import io.flutter.plugin.platform.PlatformViewFactory
class CustomerViewFactory : PlatformViewFactory(StandardMessageCodec.INSTANCE){
override fun create(context: Context, viewId: Int, args: Any?): PlatformView {
return CustomerView(context)
}
}
新建一个类继承自FlutterPlugin
import io.flutter.embedding.engine.plugins.FlutterPlugin
class CustomerViewPlugin : FlutterPlugin {
override fun onAttachedToEngine(binding: FlutterPlugin.FlutterPluginBinding) {
binding.platformViewRegistry.registerViewFactory("plugins.flutter.io/my_custom_platform_view",CustomerViewFactory())
}
override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) {
}
}
在MainActivity中添加上述的Plugin,registerViewFactory中的viewTypeId参数是一个唯一标识字符串，后续将引用在flutter视图中
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
class MainActivity: FlutterActivity() {
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
super.configureFlutterEngine(flutterEngine)
flutterEngine.plugins.add(CustomerViewPlugin())
}
}
在Flutter中引用AndroidView
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: MyCustomerPlatformView(), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
class MyCustomerPlatformView extends StatelessWidget {
@override
Widget build(BuildContext context) {
if (defaultTargetPlatform == TargetPlatform.android) {
return AndroidView(viewType: ("plugins.flutter.io/my_custom_platform_view"));
} else {
return Text("No support this View");
}
}
}
Flutter与原生之间相互交互
上述案例中我们只是简单地额嵌入了一个原生View，这种只适用于一个静态页面的处理，如果需要页面之间动态交互，则需要添加一些额外的配置，交互无非就是你可以调用我的功能，我可以调用你的功能
MethodChannel
用于两端的相互调用，并且可以返回结果，Native调用Flutter时需要在主线程中进行
Flutter发送数据/调用Native端
- 在Flutter中创建
MethodChannel
var channel = MethodChannel("samples.flutter.dev/callNative");
2.在Flutter中通过channel发送数据给到Native，通过invokeMethod函数发送到Native,然后当返回信息时将其进行显示
Container(
alignment: Alignment.center,
child: GestureDetector(
child: Text('Click to call Native'),
onTap: () async {
String result = await channel.invokeMethod("callNative", {"id": "1", "value": "Mike"});
showDialog(context: context, builder: (context){
return AlertDialog(title: Text("提示"),content: Text(result));
}
);
},
),
)
3.在Android中定义相关的接受,onMethodCall可以接受到此channel对应的调用，两端之间channel之间的关联是通过name,也就是这里给的samples.flutter.dev/NativeChannel,result.success()是本次调用反馈的结果
class NativeMethodChannel(messenger: BinaryMessenger) : MethodChannel.MethodCallHandler {
val channel = MethodChannel(messenger, "samples.flutter.dev/NativeChannel")
init {
channel.setMethodCallHandler(this)
}
override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
if (call.method == "callNative") {
val value = call.argument<String>("value")
result.success("Received it: value is $value")
}
}
}
4.在Native的MainActivity中对NativeMethodChannel进行注册，这样它才会持续监听
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
super.configureFlutterEngine(flutterEngine)
NativeMethodChannel(flutterEngine.dartExecutor.binaryMessenger)
}
Android发送数据/调用Flutter端
Android端
channel.invokeMethod("callFlutter","张三",object:MethodChannel.Result{
override fun success(result: Any?) {
Log.e("Mike","result $result")
}
override fun error(errorCode: String?, errorMessage: String?, errorDetails: Any?) {
}
override fun notImplemented() {
}
})
Flutter端接收
@override
void initState() {
super.initState();
channel.setMethodCallHandler((call) {
print("flutter called by native ${call.arguments}");
return Future.value("res");
});
}
BasicMessageChannel
EventChannel
他们的功能以及使用方式与MethodChannel相似
MethodChannel，BasicMessageChannel，EventChannel的区别与选择
-
MethodChannel使用异步的方式与原生进行交流，用于比如需要调用原生的某些功能，但是原生需要耗时返回的情况，这种事有返回值的调用，支持数据双向传递 -
EventChannel是用来返回监听各个阶段的状态，没有返回值，并且只支持单向，只支持原生传递数据给Flutter,可以用来监听某些特殊原生功能的状态 -
BasicMessageChannel用于传递字符串和半结构化的消息
欢迎关注Mike的简书
Android 知识整理
