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

https://blog.csdn.net/zl18603543572/article/details/96049359

2019-07-16 00:58:13 早起的年轻人 阅读数 185  收藏 更多

分类专栏: flutter  flutter 从入门 到精通 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 

本文链接:https://blog.csdn.net/zl18603543572/article/details/96049359

更多文章请查看 flutter从入门 到精通

本文章中的完整代码在这里

题记:不到最后时刻,千万别轻言放弃,无论结局成功与否,只要你拼博过,尽力过,一切问心无愧。

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

BasicMessageChannel 实现 Flutter 与 原生(Android 、iOS)双向通信

MethodChannel 实现 Flutter 与 原生原生(Android 、iOS)双向通信

EventChannel 实现 原生原生(Android 、iOS)向Flutter 发送消息

本文将实现:(通过 MethodChannel)

实现 Flutter 调用 Android 、iOS 原生的方法并回调Flutter

实现 Flutter 调用 Android 、iOS 原生并打开Android 原生的一个Activity页面,iOS原生的一个ViewController 页面

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

实现 Android 、iOS 原生中的 TestActivity 页面主动发送消息到Flutter中

Android 中的效果(本图还是 BasicMessageChannel 的效果图,只不过是通过 MethodChannel 方式实现出来了)

ios 中的效果(本图还是 BasicMessageChannel 的效果图,只不过是通过 MethodChannel 方式实现出来了)

前言

    例如我们要实现 A 调用 B,B就会触发,B再调用A,A就会触发这样的功能,

    那么我们就需要在 A 中设置 被B调用的监听方法,在B中设置被A 调用的监听方法

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

    在这里约定的数据格式为 {"code":100,"message":"消息","content":内容}

    也就是说双向发送消息,可能会有多种消息类型来调用不同的功能,

    统一约定数据格式 可以达到编码的规范性和代码的可维护性

1.1 实现 Flutter 中调用方法

//创建MethodChannel

  // flutter_and_native_101 为通信标识

  // StandardMessageCodec() 为参数传递的 编码方式

  static const methodChannel = const MethodChannel('flutter_and_native_101');

  //封装 Flutter 向 原生中 发送消息 的方法

  //method 为方法标识

  //arguments 为参数

  static Future<dynamic> invokNative(String method, {Map arguments}) async {

    if (arguments == null) {

      //无参数发送消息

      return await methodChannel.invokeMethod(method);

    } else {

      //有参数发送消息

      return await methodChannel.invokeMethod(method, arguments);

    }

  }

触发调用 ,分别在 三个 Button 的点击事件中触发,下面均无向 原生 Android iOS 传递参数

invokNative("test")

    ..then((result) {

        //第一种 原生回调 Flutter 的方法

        //此方法只能使用一次

        int code = result["code"];

        String message = result["message"];

      setState(() {

          recive = "invokNative 中的回调 code $code message $message ";

        });

  });

//用来实现 Android iOS 主动触发 向 Flutter 中发送消息

invokNative("test2");

//用来实现 Flutter 打开 Android iOS 中的一个新的页面

invokNative("test3");

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

Android 的 MainActivity 中注册消息监听

private MethodChannel mMethodChannel;

//记着要在 onCreat方法中调用

private void methodChannelFunction() {

    mMethodChannel = new MethodChannel(getFlutterView(), "flutter_and_native_101");

    //设置监听

    mMethodChannel.setMethodCallHandler(

        new MethodChannel.MethodCallHandler() {

            @Override

            public void onMethodCall(MethodCall call, MethodChannel.Result result) {

                String lMethod = call.method;

                // TODO

                if (lMethod.equals("test")) {

                        Toast.makeText(mContext, "flutter调用到了 android test", Toast.LENGTH_SHORT).show();

                        Map resultMap = new HashMap<>();

                        resultMap.put("message", "result.success返回给flutter的数据");

                        resultMap.put("code", 200);

                        //发消息至Flutter   此方法只能使用一次

                       result.success(resultMap);

                } else if (lMethod.equals("test2")) {

                            Toast.makeText(mContext, "flutter调用到了 android test2", Toast.LENGTH_SHORT).show();

                            Map resultMap = new HashMap<>();

                            resultMap.put("message", "android主动调用 flutter test 方法");

                            resultMap.put("code", 200);

                            //主动向Flutter 中发送消息

                            mMethodChannel.invokeMethod("test", resultMap);

                            //延迟2秒再主动向 Flutter 中发送消息

                            mHandler.postDelayed(new Runnable() {

                                    @Override

                                    public void run() {

                                              Map resultMap2 = new HashMap<>();

                                              resultMap2.put("message", "android主动调用 flutter test 方法");

                                              resultMap2.put("code", 200);

                                              mMethodChannel.invokeMethod("test2", resultMap2);

                                        }

                                 }, 2000);

                 } else if (lMethod.equals("test3")) {

                            //测试通过Flutter打开Android Activity

                            Toast.makeText(mContext, "flutter调用到了 android test3", Toast.LENGTH_SHORT).show();

                            Intent lIntent = new Intent(MainActivity.this, TestMethodChannelActivity.class);

                            MainActivity.this.startActivity(lIntent);

                    } else {

                            result.notImplemented();

                    }

                }

            }

        );

    }


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

iOS 的 AppDelegate 中

#include "AppDelegate.h"

#include "GeneratedPluginRegistrant.h"

#import

//TestViewController 是创建的一个 测试页面

#import "TestViewController.h"

@implementation AppDelegate{

    FlutterMethodChannel* methodChannel;

}

- (BOOL)application:(UIApplication*)application

didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    [GeneratedPluginRegistrant registerWithRegistry:self];

        ... ...

    //FlutterMethodChannel 与 Flutter 之间的双向通信

    [self  methodChannelFunction];

        ... ...

    return [super application:application didFinishLaunchingWithOptions:launchOptions];

}

-(void) methodChannelFunction{

    FlutterViewController* controller = (FlutterViewController*)self.window.rootViewController;

    //创建 FlutterMethodChannel

    // flutter_and_native_101 是通信标识

    methodChannel = [FlutterMethodChannel

                     methodChannelWithName:@"flutter_and_native_101"

                     binaryMessenger:controller];

    //设置监听

    [methodChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {

        // TODO

        NSString *method=call.method;

        if([method isEqualToString:@"test"]) {


            NSLog(@"flutter 调用到了 ios test");

            NSMutableDictionary *dic = [NSMutableDictionary dictionary];

            [dic setObject:@"result.success 返回给flutter的数据" forKey:@"message"];

            [dic setObject: [NSNumber numberWithInt:200] forKey:@"code"];

            //FlutterResult回调 发消息至 Flutter 中

            //此方法只能调用一次

            result(dic);


        }else  if([method isEqualToString:@"test2"]) {

            NSLog(@"flutter 调用到了 ios test2");

            NSMutableDictionary *dic = [NSMutableDictionary dictionary];

            [dic setObject:@"result.success 返回给flutter的数据" forKey:@"message"];

            [dic setObject: [NSNumber numberWithInt:200] forKey:@"code"];

            //通过此方法 可以主动向Flutter中发送消息

            //可以多次调用

            [methodChannel invokeMethod:@"test"  arguments: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中,创建了 MethodChannel 的实例 mMethodChannel,可以在MainActivity 中直接使用 mMethodChannel 实例来向 Flutter 中发送消息。

Map<String, Object> resultMap = new HashMap<>();

resultMap.put("message", "android 主动调用 flutter test 方法");

resultMap.put("code", 200);

//主动向Flutter 中发送消息

mMethodChannel.invokeMethod("test", resultMap);

在其他的 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 resultMap2 = new HashMap<>();

                    resultMap2.put("message","android 主动调用 flutter test 方法");

                    resultMap2.put("code",200);

                    if(mMethodChannel != null) {

                        // 向Flutter 发送消息

                        mMethodChannel.invokeMethod("test2", resultMap2);

                    }

                }

            });

        }

    }

}

2.2 实现 Flutter 中监听调用方法

  //创建MethodChannel

  // flutter_and_native_101 为通信标识

  // StandardMessageCodec() 为参数传递的 编码方式

  static const methodChannel = const MethodChannel('flutter_and_native_101');

  //设置消息监听

  Future<dynamic> nativeMessageListener() async {

    methodChannel.setMethodCallHandler((resultCall) {

      //处理原生 Android iOS 发送过来的消息

      MethodCall call = resultCall;

      String method = call.method;

      Map arguments = call.arguments;

      int code = arguments["code"];

      String message = arguments["message"];

      setState(() {

        recive += " code $code message $message and method $method ";

        print(recive);

      });

    });

  }


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"];

        [messageChannel sendMessage:dic];

    }


}

- (void)dealloc {

    //单条移除观察者

    //[[NSNotificationCenter defaultCenter] removeObserver:self name:@"REFRESH_TABLEVIEW" object:nil];

    //移除所有观察者

    [[NSNotificationCenter defaultCenter] removeObserver:self];

}

@end


文章最后发布于: 2019-07-16

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

推荐阅读更多精彩内容