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

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

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

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

本文链接：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<String, Object> 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<String, Object> 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<String, Object> 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 <Flutter/Flutter.h>
//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<String, Object> 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

sundaysme

发布了15 篇原创文章 · 获赞 3 · 访问量 1万+

私信关注

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

猜你喜欢