Flutter與原生通訊的一切
簡介
Flutter與原生之間的通訊依賴靈活的訊息傳遞方式：
- 應用的Flutter部分通過平臺通道（platform channel）將訊息傳送到其應用程式的所在的宿主（iOS或Android）應用（原生應用）。
- 宿主監聽平臺通道，並接收該訊息。然後它會呼叫該平臺的API，並將響應傳送回客戶端，即應用程式的Flutter部分。
- MethodChannel // Flutter與原生方法相互呼叫，用於方法掉用
- BasicMessageChannel // Flutter與原生相互傳送訊息，用於資料傳遞
- EventChannel // 原生髮送訊息，Flutter接收，用於資料流通訊
可以傳遞的資料結構
| Dart | Android | iOS |
|---|---|---|
| null | null | nil(NSNull when nested) |
| bool | Java.lang.Boolean | NSNumber numberWithBool: |
| int | Java.lang.Integer | NSNumber numberWithInt: |
| int, if 32 bits not enough | Java.lang.Long | NSNumber numberWithLong: |
| int, if 64 bits not enough | Java.lang.BigInteger | FlutterStandardBigInteger |
| double | Java.lang.Double | NSNumber numberWithDouble |
| String | java.lang.String | NSString |
| Unit8List | byte[] | FlutterStandardTypedData typedDataWithBytes: |
| Int32List | int[] | FlutterStandardTypedData typedDataWithInt32: |
| Int64List | long[] | FlutterStandardTypedData typedDataWithInt64: |
| Float64List | double[] | FlutterStandardTypedData typedDataWithFloat64: |
| List | Java.util.ArrayList | NSArray |
| Map | Java.util.HashMap | NSDictionary |
MethodChannel（互相呼叫方法）
Android呼叫Flutter方法：
Android:
- 初始化MethodChannel
//初始化，傳遞1. flutterView（MainActivity中getFlutter獲取），2. name常量，Flutter中使用同名常量
MethodChannel methodChannel = new MethodChannel(flutterView, “testflutter”);
複製程式碼- 呼叫Flutter方法
private void invokeFlutterMethod() {
if (this.mMethodChannel != null) {
this.mMethodChannel.invokeMethod("flutterMethod", "native引數", new MethodChannel.Result() {
@Override
public void success(Object o) {
Toast.makeText(mContext, o.toString(), Toast.LENGTH_LONG).show();
}
@Override
public void error(String s, String s1, Object o) {
}
@Override
public void notImplemented() {
}
});
}
}
複製程式碼通過MethodChannel呼叫invokeMethod("方法名","傳遞引數",[Flutter返回引數回撥，非必須]);
Flutter:
- 初始化MethodChannel
static const methodChannel = const MethodChannel('testflutter');
複製程式碼- 新增處理方法到MethodChannel
methodChannel.setMethodCallHandler(_addNativeMethod);
複製程式碼- 處理android呼叫的方法，根據方法名
Future<dynamic> _addNativeMethod(MethodCall methodCall) async {
switch (methodCall.method) {
case 'flutterMethod':
setState(() {
_calledFromNative = 'flutter method called from native with param ' + methodCall.arguments;
});
return 'flutter method called from native with param ' + methodCall.arguments;
break;
}
}
//其中，return返回的資料在Android的回撥中接收
複製程式碼Flutter呼叫Android方法：
Android：
- 初始化MethodChannel，並新增自定義plugin
MethodChannel methodChannel = new MethodChannel(flutterView, METHOD_CHANNEL);
methodChannel.setMethodCallHandler(plugin);
複製程式碼- 自定義的plugin實現MethodChannel.MethodCallHandler介面的onMethodCall方法
@Override
public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
// Flutter呼叫Native的方法
if (methodCall.method.equals("getBatteryLevel")) {
int batteryLevel = getBatteryLevel();
if (batteryLevel != -1) {
result.success(batteryLevel);
} else {
result.error("UNAVALIABLE", "battery level unavaliable", null);
}
} else {
result.notImplemented();
}
}
//在onMethodCall中監聽Flutter呼叫什麼名字的方法（此處getBatterLevel），通過result返回方法的執行結果。
複製程式碼Flutter：
- 初始化MethodChannel
static const methodChannel = const MethodChannel('testflutter');
複製程式碼- 呼叫Android的方法，接收返回資料
//方法通道的方法是非同步的
Future<Null> _getBatteryLevel() async {
String batteryLevel;
try {
final int result = await methodChannel.invokeMethod('getBatteryLevel');
batteryLevel = 'Battery level $result .';
} on PlatformException catch (e) {
batteryLevel = 'Battery level unknown ${e.message}';
}
setState(() {
_batteryLevel = batteryLevel;
});
}
複製程式碼BasicMessageChannel（互相傳送訊息）
Android給Flutter發訊息：
Android：
- 初始化BasicMethodChannel
BasicMessageChannel messageChannel = new BasicMessageChannel<>(flutterView, "messageChannel", StandardMessageCodec.INSTANCE);
複製程式碼- 呼叫傳送訊息的方法
private void sendMessageToFlutter() {
if (this.mBasicMessageChannel != null) {
this.mBasicMessageChannel.send("Message From Native");
}
}
複製程式碼Flutter：
- 初始化BasicMessageChannel
static const basicMessageChannel = BasicMessageChannel('messageChannel', StandardMessageCodec());
複製程式碼- 新增接收資訊處理方法
void _listenMessageFromNative() {
basicMessageChannel.setMessageHandler(_receiveMessageFromNative);
}
複製程式碼- 處理接收的資料
//Flutter接收Native發來的訊息
Future<dynamic> _receiveMessageFromNative(Object result) async {
setState(() {
_messageFromNative = result.toString();
});
}
複製程式碼Flutter給Android發訊息：
Android：
- 初始化BasicMessageChannel並新增plugin給handler
BasicMessageChannel messageChannel = new BasicMessageChannel<>(flutterView, "messageChannel", StandardMessageCodec.INSTANCE);
messageChannel.setMessageHandler(plugin);
複製程式碼- plugin實現BasicMessageChannel.MessageHandler介面的onMessage方法，處理接收到的資訊
@Override
public void onMessage(Object o, BasicMessageChannel.Reply reply) {
Toast.makeText(mContext, o.toString(), Toast.LENGTH_LONG).show();
reply.reply(o.toString()+" back from native");
}
//reply返回資料給Flutter
複製程式碼Flutter：
- 初始化BasicMessageChannel
static const basicMessageChannel = BasicMessageChannel('messageChannel', StandardMessageCodec());
複製程式碼- 傳送訊息給Android並接收返回資料
Future<dynamic> _sendMessageToNative(String message) async {
String reply = await basicMessageChannel.send(message);
print(reply);
setState(() {
_replayFromNative = reply;
});
return reply;
}
複製程式碼EventChannel（原生髮送訊息，Flutter接收）
Android：
- 初始化EventChannel並新增plugin給handler
EventChannel eventChannel = new EventChannel(flutterView, EVENT_CHANNEL);
eventChannel.setStreamHandler(plugin);
複製程式碼- plugin實現EventChannel.StreamHandler介面及onListen、onCancel方法
- 在onListen中通過EventChannel.EventShink的例項發訊息給Flutter
@Override
public void onListen(Object o, EventChannel.EventSink eventSink) {
BroadcastReceiver chargingBroadcastReceiver = createChargingBroadcaseReceiver(eventSink);
mContext.registerReceiver(chargingBroadcastReceiver,new IntentFilter(Intent.ACTION_BATTERY_CHANGED));
}
@Override
public void onCancel(Object o) {
}
private BroadcastReceiver createChargingBroadcaseReceiver(EventChannel.EventSink eventSink) {
return new BroadcastReceiver() {
@Override
public void onReceive(Context context, Intent intent) {
int status = intent.getIntExtra(BatteryManager.EXTRA_STATUS, -1);
if (status == BatteryManager.BATTERY_STATUS_UNKNOWN) {
eventSink.error("UNAVALIABLE", "charging status is unavailable", null);
} else {
boolean isCharging = status == BatteryManager.BATTERY_STATUS_CHARGING;
eventSink.success(isCharging ? "charging" : "disCharging");
}
}
};
}
複製程式碼Flutter:
- 初始化EventChannel
static const _eventChannel = const EventChannel('charging');
複製程式碼- 新增接收資料方法
void listenNativeEvent() {
_eventChannel.receiveBroadcastStream().listen(_onEvent, onError: _onError);
}
//接收返回的資料
void _onEvent(Object object) {
String s = "Battery is ${object == 'charging' ? '' : 'dis'}Charging";
setState(() {
_batteryStatus = s;
});
}
複製程式碼橋接View給Flutter使用
Android：
- 自定義View，繼承自PlatformView
public class MyTextview implements PlatformView {
TextView t;
public MyTextview(Context context, MessageCodec<Object> messenger, int id, Map<String, Object> params){
TextView textView = new TextView(context);
//獲取引數，是否有傳遞引數過來
if (params.containsKey("text")){
textView.setText(params.get("text").toString());
}
this.t = textView;
}
@Override
public View getView() {
return t;
}
@Override
public void dispose() {
}
}
複製程式碼- 實現PlatformViewFactory
public class TextViewFactory extends PlatformViewFactory {
private MessageCodec<Object> messageCodec;
public TextViewFactory(MessageCodec<Object> createArgsCodec) {
super(createArgsCodec);
this.messageCodec = createArgsCodec;
}
@Override
public PlatformView create(Context context, int i, Object o) {
return new MyTextview(context, messageCodec, i, (Map<String, Object>) o);
}
}
複製程式碼- 註冊View給Flutter使用
registrar.platformViewRegistry().registerViewFactory("TextView", new TextViewFactory(new StandardMessageCodec()));
//起名叫TextView，給Flutter用做viewType
複製程式碼Flutter:
- 使用橋接的View
AndroidView(
viewType: 'TextView',
creationParams: {'text': 'TTTeeeXXXttt'},
creationParamsCodec: new StandardMessageCodec(),
),//其中creationParams，creationParamsCodec必須同時存在或不存在
複製程式碼以上，正文結束；
官方還有一些其他建議
釋出pub使用：
-
Hosted packages（釋出到pub.dartlang.org）
$flutter packages pub publish --dry-run $flutter packages pub publish 複製程式碼在yaml檔案和其他dependencies一樣使用。
-
Git packages（遠端）
程式碼上傳到Git，並打一個tag
yaml檔案引用
dependencies: flutter_remote_package: git: url: git@gitlab.... ref: 0.0.1 //可以是commit、branch、tag 複製程式碼 -
本地
在Flutter App根目錄下建立plugins資料夾，把外掛移動到plugins下。
dependencies： flutter_plugin_batterylevel: path: plugins/flutter_plugin_batterylevel 複製程式碼以上限於在建立工程的時候，使用的是plugins建立的，有時候會在自己的Android或iOS工程內部開發，就不這麼方便分離釋出了。
有時候需要到UI thread執行channelMethod，在Android上需要post一個Runnable到Android UI執行緒。
new Handler(Looper.getMainLooper()).post(new Runnable() {
@Override
public void run(){
// call the desired channel message here.
}
})
複製程式碼-
所謂的“傳View”的本質是傳遞紋理ID，我們只需要明白Flutter是通過Presentation實現了外接紋理，在建立Presentation時，傳入FlutterView對應的Context和建立出來的一個虛擬螢幕物件，使得Flutter可以直接通過ID找到並使用Native建立出來的紋理資料。
-
事件處理，從Native傳遞到Flutter這一階段Flutter按照自己的規則處理事件，如果AndroidView獲取到了事件，事件會被封裝成相應的Native端的事件通過方法通道傳回Native，Native再處理事件。
對於可能出現的滑動時間衝突，可以參考官方註釋：
/// For example, with the following setup vertical drags will not be dispatched to the Android view as the vertical drag gesture is claimed by the parent [GestureDetector]. /// /// GestureDetector( /// onVerticalDragStart: (DragStartDetails d) {}, /// child: AndroidView( /// viewType: 'webview', /// gestureRecognizers: <OneSequenceGestureRecognizer>[], /// ), /// ) /// /// To get the [AndroidView] to claim the vertical drag gestures we can pass a vertical drag gesture recognizer in [gestureRecognizers] e.g: /// /// GestureDetector( /// onVerticalDragStart: (DragStartDetails d) {}, /// child: SizedBox( /// width: 200.0, /// height: 100.0, /// child: AndroidView( /// viewType: 'webview', /// gestureRecognizers: <OneSequenceGestureRecognizer>[new VerticalDragGestureRecognizer()], /// ), /// ), /// ) 複製程式碼[github]github.com/damengzai/f…
更多關注微信公眾號：Flutter入門
在Flutter中嵌入Native元件的正確姿勢是... ——閒魚技術