Flutter通过BasicMessageChannel实现Flutter 与Android iOS 的双向通信

Flutter 与 Android iOS 原生的通信有以下三种方式

BasicMessageChannel 实现 Flutter 与 原生(Android 、iOS)双向通信
MethodChannel 实现 Flutter 与 原生原生(Android 、iOS)双向通信
EventChannel 实现 原生原生(Android 、iOS)向Flutter 发送消息
本文将实现:(通过 BasicMessageChannel)

实现 Flutter 调用 Android 、iOS 原生的方法并回调Flutter
实现 Flutter 调用 Android 、iOS 原生并打开Android 原生的一个Activity页面,iOS原生的一个ViewController 页面
实现 Android 、iOS 原生主动发送消息到 Flutter 中
实现 Android 、iOS 原生中的 TestActivity 页面主动发送消息到Flutter中
Android 中的效果

ios 中的效果

前言

例如我们要实现 A 调用 B,B就会触发,B再调用A,A就会触发这样的功能,
那么我们就需要在 A 中设置 被B调用的监听方法,在B中设置被A 调用的监听方法 

1
2
1 实现Flutter 调用 Andoid iOS原生方法并回调

在这里约定的数据格式为 {"code":100,"message":"消息","content":内容}
也就是说双向发送消息,可能会有多种消息类型来调用不同的功能,
统一约定数据格式 可以达到编码的规范性和代码的可维护性

1.1 实现 Flutter 中调用方法

String recive = "";

//创建 BasicMessageChannel
// flutter_and_native_100 为通信标识
// StandardMessageCodec() 为参数传递的 编码方式
static const messageChannel = const BasicMessageChannel(
'flutter_and_native_100', StandardMessageCodec());

//发送消息
Future<Map> sendMessage(Map arguments) async {
Map reply = await messageChannel.send(arguments);
//解析 原生发给 Flutter 的参数
int code = reply["code"];
String message = reply["message"];

//更新 Flutter 中页面显示
setState(() {
  recive = "code:$code message:$message";
});
return reply;
}

触发调用 ,分别在 三个 Button 的点击事件中触发

//Flutter 向 Android iOS 中基本的发送消息方式
sendMessage({"method": "test", "ontent": "flutter 中的数据", "code": 100});
//用来实现 Android iOS 主动触发 向 Flutter 中发送消息
sendMessage({"method": "test2", "ontent": "flutter 中的数据", "code": 100});
//用来实现 Flutter 打开 Android iOS 中的一个新的页面
sendMessage({"method": "test3", "ontent": "flutter 中的数据", "code": 100});

1.2 实现实现 Android 中监听方法并回调

Android 的 MainActivity 中注册消息监听

flutter 更新之后 FlutterActivity 中没有 getFlutterView() 方法
使用 getFlutterEngine().getDartExecutor().getBinaryMessenger()代替。
private BasicMessageChannel<Object> mMessageChannel;

private void messageChannelFunction() {
    //消息接收监听
    //BasicMessageChannel (主要是传递字符串和一些半结构体的数据)
    //创建通
    mMessageChannel = new BasicMessageChannel<Object>(getFlutterView(), "flutter_and_native_100", StandardMessageCodec.INSTANCE);
    // 接收消息监听
    mMessageChannel.setMessageHandler(new BasicMessageChannel.MessageHandler<Object>() {
        @Override
        public void onMessage(Object o, BasicMessageChannel.Reply<Object> reply) {
            
            Map<Object, Object> arguments = (Map<Object, Object>) o;
            
            //方法名标识
            String lMethod = (String) arguments.get("method");
            
            //测试 reply.reply()方法 发消息给Flutter
            if (lMethod.equals("test")) {
                Toast.makeText(mContext, "flutter 调用到了 android test", Toast.LENGTH_SHORT).show();
                //回调Flutter  
                Map<String, Object> resultMap = new HashMap<>();
                resultMap.put("message", "reply.reply 返回给flutter的数据");
                resultMap.put("code", 200);
                //回调 此方法只能使用一次
                reply.reply(resultMap);
                
            } else if (lMethod.equals("test2")) {
                //测试 mMessageChannel.send 发消息给Flutter
                //Android 可通过这个方法来主动向 Flutter中发送消息
                //只有Flutter 中注册了消息监听 才能接收到这个方法向 Flutter 中发送的消息
                channelSendMessage();
            } else if (lMethod.equals("test3")) {
                //测试通过Flutter打开Android Activity
                Toast.makeText(mContext, "flutter 调用到了 android test3", Toast.LENGTH_SHORT).show();
                Intent lIntent = new Intent(MainActivity.this, TestBasicMessageActivity.class);
                MainActivity.this.startActivity(lIntent);
            }
        }
    });
    
}

1.3 实现实现 iOS 中监听方法 并回调

iOS 的 AppDelegate 中

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import <Flutter/Flutter.h>
//TestViewController 是创建的一个 测试页面
#import "TestViewController.h"

@implementation AppDelegate{
    FlutterBasicMessageChannel* messageChannel;
}

- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [GeneratedPluginRegistrant registerWithRegistry:self];
        ... ... 
    //FlutterBasicMessageChannel 与Flutter 之间的双向通信
    [self BasicMessageChannelFunction];

        ... ... 
    
    
    
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}


-(void) BasicMessageChannelFunction{
    //获取当前的 controller
    FlutterViewController* controller = (FlutterViewController*)self.window.rootViewController;
    // 初始化定义
    // flutter_and_native_100 j 
    messageChannel = [FlutterBasicMessageChannel messageChannelWithName:@"flutter_and_native_100" binaryMessenger:controller];
    
    // 接收消息监听
    [messageChannel setMessageHandler:^(id message, FlutterReply callback) {
        
        NSString *method=message[@"method"];
        if ([method isEqualToString:@"test"]) {
            
            NSLog(@"flutter 调用到了 ios test");
            NSMutableDictionary *dic = [NSMutableDictionary dictionary];
            
            [dic setObject:@"[messageChannel setMessageHandler:^(id message, FlutterReply callback)  返回给flutter的数据" forKey:@"message"];
            [dic setObject: [NSNumber numberWithInt:200] forKey:@"code"];
            
            
            callback(dic);
            
        }else  if ([method isEqualToString:@"test2"]) {
            NSLog(@"flutter 调用到了 ios test2");
            NSMutableDictionary *dic = [NSMutableDictionary dictionary];
            [dic setObject:@"[messageChannel sendMessage:dic] 返回给flutter的数据" forKey:@"message"];
            [dic setObject: [NSNumber numberWithInt:200] forKey:@"code"];
            //通过这个方法 iOS可以主动多次 向 Flutter 发送消息
            [messageChannel sendMessage:dic];
        }else  if ([method isEqualToString:@"test3"]) {
            NSLog(@"flutter 调用到了 ios test3 打开一个新的页面 ");
            TestViewController *testController = [[TestViewController alloc]initWithNibName:@"TestViewController" bundle:nil];
            [controller presentViewController:testController animated:YES completion:nil];
        }
    }];
    
}

@end

2 Android 、iOS 原生主动发送消息到 Flutter 中

2.1 实现Android 中主动调动调用方法

在MainActivity中,创建了 BasicMessageChannel 的实例 mMessageChannel,可以在MainActivity 中直接使用 mMessageChannel 实例来向 Flutter 中发送消息。

    private void channelSendMessage() {
        
        Toast.makeText(mContext, "flutter 调用到了 android test", Toast.LENGTH_SHORT).show();
        //构建参数 
        Map<String, Object> resultMap = new HashMap<>();
        resultMap.put("message", "reply.reply 返回给flutter的数据");
        resultMap.put("code", 200);
        //向 Flutter 中发送消息
        //参数 二可以再次接收到 Flutter 中的回调
        //也可以直接使用 mMessageChannel.send(resultMap)
        mMessageChannel.send(resultMap, new BasicMessageChannel.Reply<Object>() {
            @Override
            public void reply(Object o) {
                
                Log.d("mMessageChannel", "mMessageChannel send 回调 " + o);
            }
        });
    }
    

在其他的 Activity 页面中,我们就使用不到这个实例的,我这里的一个实现 Android 中新建的Activity 页面向 Flutter 中发送消息的方法 是广播机制

在 MainActivity 中注册广播,在广播接收者中通过 BasicMessageChannel 的实例 mMessageChannel 来发送消息。

在 Android 中其他的页面中 发送广播到 MainActivity 中的广播接收者中,这样就实现了Android 中新建的Activity 页面向 Flutter 中发送消息

public class MainActivity extends FlutterActivity {

... ...

Handler mHandler = new Handler(Looper.myLooper());
private MainReceiver mMainReceiver;

@Override
protected void onDestroy() {
    super.onDestroy();
    //注销广播
    unregisterReceiver(mMainReceiver);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    ... ...
    //注册广播
    mMainReceiver = new MainReceiver();
    IntentFilter lIntentFilter = new IntentFilter("android.to.flutter");
    registerReceiver(mMainReceiver, lIntentFilter);
    
    
}


public class MainReceiver extends BroadcastReceiver {
    public MainReceiver() {
    }
    
    @Override
    public void onReceive(Context context, Intent intent) {
        Toast.makeText(context, "接收到自定义的广播", Toast.LENGTH_SHORT).show();
        mHandler.post(new Runnable() {
            @Override
            public void run() {
                Map<String, Object> resultMap2 = new HashMap<>();
                resultMap2.put("message", "android 主动调用 flutter test 方法");
                resultMap2.put("code", 200);
                
                if (mMessageChannel != null) {
                    // 向Flutter 发送消息
                    mMessageChannel.send(resultMap2, new BasicMessageChannel.Reply<Object>() {
                        @Override
                        public void reply(Object o) {
                            System.out.println("android onReply: " + o);
                        }
                    });
                }
                
            }
        });
    }
}
   }

2.2 实现 Flutter 中监听调用方法

 //创建 BasicMessageChannel
  // flutter_and_native_100 为通信标识
  // StandardMessageCodec() 为参数传递的 编码方式
  static const messageChannel = const BasicMessageChannel(
      'flutter_and_native_100', StandardMessageCodec());

  //接收消息监听
  void receiveMessage() {
    messageChannel.setMessageHandler((result) async {
      //解析 原生发给 Flutter 的参数
      int code = result["code"];
      String message = result["message"];

      setState(() {
        recive = "receiveMessage: code:$code message:$message";
      });
      return 'Flutter 已收到消息';
    });
    }
2.3 实现 iOS 中主动调动调用方法

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import <Flutter/Flutter.h>
#import "TestViewController.h"

@implementation AppDelegate{
    FlutterBasicMessageChannel* messageChannel;
}

- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [GeneratedPluginRegistrant registerWithRegistry:self];
    
    
    //注册通知
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(notificationFuncion:) name:@"ios.to.flutter" object:nil];
    
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

   ... ... 

- (void)notificationFuncion: (NSNotification *) notification {
    // iOS 中其他页面向Flutter 中发送消息通过这里
    // 本页中 可以直接使用   [messageChannel sendMessage:dic];
    //处理消息
    NSLog(@"notificationFuncion ");
    NSMutableDictionary *dic = [NSMutableDictionary dictionary];
    if (messageChannel!=nil) {
        [dic setObject:@" [messageChannel sendMessage:dic]; 向Flutter 发送消息 " forKey:@"message"];
        [dic setObject: [NSNumber numberWithInt:401] forKey:@"code"];
        //主动向Flutter 中发送消息
        [messageChannel sendMessage:dic];
    }
    
}

- (void)dealloc {
    //单条移除观察者
    //[[NSNotificationCenter defaultCenter] removeObserver:self name:@"REFRESH_TABLEVIEW" object:nil];
    //移除所有观察者
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}
@end

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容