Flutter 混合開發系列 包含以下：android
嵌入原生View-Android 嵌入原生View-iOS 與原生通訊-MethodChannel 與原生通訊-BasicMessageChannel 與原生通訊-EventChannel 添加 Flutter 到 Android Activity 添加 Flutter 到 Android Fragment 添加 Flutter 到 iOS 每一個工做日分享一篇，歡迎關注、點贊及轉發。ios
平臺通訊的3中方式
Flutter 與 Native 端通訊有以下3個方法：web
-
MethodChannel：Flutter 與 Native 端相互調用，調用後能夠返回結果，能夠 Native 端主動調用，也能夠Flutter主動調用，屬於雙向通訊。此方式爲最經常使用的方式， Native 端調用須要在主線程中執行。 -
BasicMessageChannel：用於使用指定的編解碼器對消息進行編碼和解碼，屬於雙向通訊，能夠 Native 端主動調用，也能夠Flutter主動調用。 -
EventChannel：用於數據流（event streams）的通訊， Native 端主動發送數據給 Flutter，一般用於狀態的監聽，好比網絡變化、傳感器數據等。
Flutter 端
Flutter 端建立 MethodChannel 通道，用於與原生端通訊：微信
var channel = BasicMessageChannel('com.flutter.guide.BasicMessageChannel',StandardMessageCodec());
com.flutter.guide.BasicMessageChannel 是 BasicMessageChannel 的名稱，原生端要與之對應。網絡
發送消息：app
var result = await channel.send({'name': 'laomeng', 'age': 18});
-
參數類型任意，多個參數一般使用 Map。 -
返回 Future，原生端返回的數據。
完整代碼：async
class BasicMessageChannelDemo extends StatefulWidget {
@override
_BasicMessageChannelDemoState createState() => _BasicMessageChannelDemoState();
}
class _BasicMessageChannelDemoState extends State<BasicMessageChannelDemo> {
var channel = BasicMessageChannel('com.flutter.guide.BasicMessageChannel',StandardMessageCodec());
var _data;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
SizedBox(
height: 50,
),
RaisedButton(
child: Text('發送數據到原生'),
onPressed: () async {
var result = await channel.send({'name': 'laomeng', 'age': 18});
var name = result['name'];
var age = result['age'];
setState(() {
_data = '$name,$age';
});
},
),
Text('原生返回數據：$_data'),
],
),
);
}
}
Android 端
android 下建立 BasicMessageChannelDemo：編輯器
class BasicMessageChannelDemo(messenger: BinaryMessenger) : BasicMessageChannel.MessageHandler<Any> {
private var channel: BasicMessageChannel<Any>
init {
channel = BasicMessageChannel(messenger, "com.flutter.guide.BasicMessageChannel", StandardMessageCodec())
channel.setMessageHandler(this)
}
override fun onMessage(message: Any?, reply: BasicMessageChannel.Reply<Any>) {
val name = (message as Map<String, Any>)["name"]
val age = (message as Map<String, Any>)["age"]
var map = mapOf("name" to "hello,$name",
"age" to "$age"
)
reply.reply(map)
}
}
onMessage 方法在 Flutter 端調用 send 方法後調用，解析方法以下：ide
override fun onMessage(message: Any?, reply: BasicMessageChannel.Reply<Any>) {
val name = (message as Map<String, Any>)["name"]
val age = (message as Map<String, Any>)["age"]
var map = mapOf("name" to "hello,$name",
"age" to "$age"
)
reply.reply(map)
}
-
message 是傳入的參數，因爲 Flutter 端傳入的是 Map，因此上面的解析按照 Map 解析。 -
reply.reply() 是返回給 Flutter 的結果。
Flutter 端解析：flex
var result = await channel.send({'name': 'laomeng', 'age': 18});
var name = result['name'];
var age = result['age'];
兩端的解析要相互對應。
在 MainActivity 啓動：
class MainActivity : FlutterActivity() {
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
super.configureFlutterEngine(flutterEngine)
BasicMessageChannelDemo(flutterEngine.dartExecutor.binaryMessenger)
flutterEngine.plugins.add(MyPlugin())
}
}
iOS 端
ios 下建立 MethodChannelDemo，按以下方式：
import Flutter
import UIKit
public class BasicMessageChannelDemo {
var channel:FlutterBasicMessageChannel
init(messenger: FlutterBinaryMessenger) {
channel = FlutterBasicMessageChannel(name: "com.flutter.guide.BasicMessageChannel", binaryMessenger: messenger)
channel.setMessageHandler { (message, reply) in
if let dict = message as? Dictionary<String, Any> {
let name:String = dict["name"] as? String ?? ""
let age:Int = dict["age"] as? Int ?? -1
reply(["name":"hello,\(name)","age":age])
}
}
}
}
在 AppDelegate 啓動：
import UIKit
import Flutter
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
MethodChannelDemo(messenger: controller.binaryMessenger)
BasicMessageChannelDemo(messenger: controller.binaryMessenger)
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
原生端主動發送消息給Flutter
Flutter 端接收數據
@override
void initState() {
super.initState();
channel.setMessageHandler((message) {
setState(() {
_nativeData = message['count'];
});
});
}
Android 發送數據
原生端啓動定時器，每隔一秒向 Flutter 發送數據，Android 端代碼：
class BasicMessageChannelDemo(var activity: Activity, messenger: BinaryMessenger) : BasicMessageChannel.MessageHandler<Any> {
private var channel: BasicMessageChannel<Any>
private var count = 0
init {
channel = BasicMessageChannel(messenger, "com.flutter.guide.BasicMessageChannel", StandardMessageCodec())
channel.setMessageHandler(this)
startTimer()
}
fun startTimer() {
var timer = Timer().schedule(timerTask {
activity.runOnUiThread {
var map = mapOf("count" to count++)
channel.send(map,object :BasicMessageChannel.Reply<Any>{
override fun reply(reply: Any?) {
}
})
}
}, 0, 1000)
}
override fun onMessage(message: Any?, reply: BasicMessageChannel.Reply<Any>) {
val name = (message as Map<String, Any>)["name"]
val age = (message as Map<String, Any>)["age"]
var map = mapOf("name" to "hello,$name",
"age" to "$age"
)
reply.reply(map)
}
}
注意：Android 端發送數據要在主現場中調用，即：
activity.runOnUiThread {
var map = mapOf("count" to count++)
channel.invokeMethod("timer", map)
}
啓動修改以下：
class MainActivity : FlutterActivity() {
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
super.configureFlutterEngine(flutterEngine)
BasicMessageChannelDemo(this,flutterEngine.dartExecutor.binaryMessenger)
flutterEngine.plugins.add(MyPlugin())
}
}
iOS 發送數據
iOS 端啓動定時器代碼以下：
import Flutter
import UIKit
public class BasicMessageChannelDemo {
var channel:FlutterBasicMessageChannel
var count = 0
init(messenger: FlutterBinaryMessenger) {
channel = FlutterBasicMessageChannel(name: "com.flutter.guide.BasicMessageChannel", binaryMessenger: messenger)
channel.setMessageHandler { (message, reply) in
if let dict = message as? Dictionary<String, Any> {
let name:String = dict["name"] as? String ?? ""
let age:Int = dict["age"] as? Int ?? -1
reply(["name":"hello,\(name)","age":age])
}
}
startTimer()
}
func startTimer() {
var timer = Timer.scheduledTimer(timeInterval:1, target: self, selector:#selector(self.tickDown),userInfo:nil,repeats: true)
}
@objc func tickDown(){
count += 1
var args = ["count":count]
channel.sendMessage(args) { (reply) in
}
}
}
本文分享自微信公衆號 - 老孟Flutter（lao_meng_qd）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。