美文网首页
flutter与原生通信的方式简介

flutter与原生通信的方式简介

作者: CodeLuck | 来源:发表于2023-08-24 17:42 被阅读0次

Flutter和原生之间进行通信可以通过以下几种方式:

  1. Flutter MethodChannel:Flutter提供了MethodChannel来实现Flutter与原生平台的双向方法调用。我们可以在Flutter中创建一个MethodChannel对象,并定义方法的名称和参数。然后在原生代码中注册相应的方法处理程序,当Flutter调用该方法时,原生代码会执行相应的操作,并返回结果给Flutter。

  2. Flutter EventChannel:EventChannel用于在Flutter和原生之间传递事件流。我们可以在Flutter中创建一个EventChannel对象,并定义事件的名称和参数。然后在原生代码中监听该事件,并在特定条件下发送事件给Flutter。

  3. PlatformView:如果你需要在Flutter中使用原生控件或视图,可以使用PlatformView。它允许我们在Flutter中嵌入原生视图,并与其进行交互。

  4. Flutter Plugin:如果需要更复杂的功能或者想要封装一些原生功能为Flutter插件,可以创建一个Flutter插件。Flutter插件允许我们在Flutter和原生之间建立更高级的通信机制,并提供一致的API给Flutter开发者使用。

这些是常见的Flutter和原生通信方式,具体的选择取决于实际需求和场景。

下面是简单的demo实现:

首先是MethodChannel的方式:

在Flutter中,可以使用MethodChannel来实现与原生平台(如安卓和iOS)的通信。下面是一个简单的代码示例:

首先,在Flutter端创建一个MethodChannel对象,并定义与原生平台通信的方法:

首先dart代码实现:
 import 'package:flutter/services.dart';

// 创建MethodChannel对象
MethodChannel _channel = MethodChannel('com.example.channel');

// 定义与原生平台通信的方法
Future<void> sendMessageToNative(String message) async {
  try {
    // 调用原生平台的方法
    await _channel.invokeMethod('sendMessage', {'message': message});
  } catch (e) {
    print('Error: $e');
  }
}

然后,在原生平台的代码中注册MethodChannel,并处理Flutter端发送的消息:

在安卓端(Java)的代码示例:
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel.MethodCallHandler;
import io.flutter.plugin.common.MethodChannel.Result;

public class MainActivity extends FlutterActivity {
 private static final String CHANNEL = "com.example.channel";

// 创建MethodChannel对象
 private MethodChannel methodChannel;

 @Override
 public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
   super.configureFlutterEngine(flutterEngine);

   // 注册MethodChannel
   methodChannel = new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL);
   //接受flutter消息
   methodChannel.setMethodCallHandler(new MethodCallHandler() {
     @Override
     public void onMethodCall(MethodCall call, Result result) {
        if (call.method.equals("sendMessage")) {
          String message = call.argument("message");
          // 处理Flutter端发送的消息
          handleSendMessage(message);
          result.success(null); // 返回结果给Flutter端
         } else {
           result.notImplemented();
         }
       }
     });
/*
  //发送给flutter消息
   String message = "Hello from Android";
  // 发送消息给Flutter端
    methodChannel.invokeMethod("sendMessage", message);
*/
 }

 private void handleSendMessage(String message) {
   // 处理接收到的消息
   System.out.println("Received message from Flutter: " + message);
 }
}
在iOS端(Objective-C)的代码示例:

#import "AppDelegate.h"
#import <Flutter/Flutter.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  FlutterViewController* flutterViewController = (FlutterViewController*)self.window.rootViewController;

  // 注册MethodChannel
  FlutterMethodChannel* channel = [FlutterMethodChannel
      methodChannelWithName:@"com.example.channel"
            binaryMessenger:flutterViewController.binaryMessenger];

  [channel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
    if ([call.method isEqualToString:@"sendMessage"]) {
      NSString* message = call.arguments[@"message"];
      // 处理Flutter端发送的消息
      [self handleSendMessage:message];
      result(nil); // 返回结果给Flutter端
    } else {
      result(FlutterMethodNotImplemented);
    }
  }];

/*
   // 发送消息给Flutter端
  [channel invokeMethod:@"sendMessage" arguments:message];
*/
 
 return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (void)handleSendMessage:(NSString*)message {
  // 处理接收到的消息
  NSLog(@"Received message from Flutter: %@", message);
}

@end

//
//
//

然后是使用EventChannel进行通信

dart代码:

import 'package:flutter/services.dart';

// 创建EventChannel对象
EventChannel _eventChannel = EventChannel('com.example.channel');

// 定义与原生平台通信的事件流
Stream<dynamic> receiveMessageFromNative() {
  // 监听原生平台发送的事件
  return _eventChannel.receiveBroadcastStream();
}
安卓代码:
import io.flutter.plugin.common.EventChannel;

public class MainActivity extends FlutterActivity {
  private static final String CHANNEL = "com.example.channel";

  @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
    super.configureFlutterEngine(flutterEngine);

    // 注册EventChannel
    new EventChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
        .setStreamHandler(new EventChannel.StreamHandler() {
          private EventChannel.EventSink eventSink;

          @Override
          public void onListen(Object arguments, EventChannel.EventSink sink) {
            eventSink = sink;
            
            // 发送事件给Flutter端
            sendMessageToFlutter("Hello from Android");
          }

          @Override
          public void onCancel(Object arguments) {
            eventSink = null;
          }
          
          private void sendMessageToFlutter(String message) {
            if (eventSink != null) {
              eventSink.success(message); // 发送事件给Flutter端
            }
          }
        });
  }
}
iOS代码:
#import "AppDelegate.h"
#import <Flutter/Flutter.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  FlutterViewController* flutterViewController = (FlutterViewController*)self.window.rootViewController;

  // 注册EventChannel
  FlutterEventChannel* channel = [FlutterEventChannel
      eventChannelWithName:@"com.example.channel"
           binaryMessenger:flutterViewController.binaryMessenger];

  [channel setStreamHandler:self];

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

#pragma mark - FlutterStreamHandler

- (FlutterError *)onListenWithArguments:(id)arguments eventSink:(FlutterEventSink)eventSink {
  // 发送事件给Flutter端
  [self sendMessageToFlutter:@"Hello from iOS" eventSink:eventSink];
  return nil;
}

- (FlutterError *)onCancelWithArguments:(id)arguments {
  return nil;
}

- (void)sendMessageToFlutter:(NSString *)message eventSink:(FlutterEventSink)eventSink {
  if (eventSink) {
    eventSink(message); // 发送事件给Flutter端
  }
}

@end
然后是使用PlatformView与原生进行通信

它本质上也是用的MethodChannel或者EventChannel进行通信

首先,在Flutter端创建一个PlatformView,并定义与原生通信的方法:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class NativeView extends StatefulWidget {
  @override
  _NativeViewState createState() => _NativeViewState();
}

class _NativeViewState extends State<NativeView> {
  // 创建MethodChannel对象
  MethodChannel _methodChannel = MethodChannel('com.example.native_view');

  // 定义与原生通信的方法
  Future<void> sendMessageToNative(String message) async {
    try {
      // 调用原生平台的方法
      await _methodChannel.invokeMethod('sendMessage', {'message': message});
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return AndroidView(
      viewType: 'com.example.native_view',
      creationParamsCodec: const StandardMessageCodec(),
      onPlatformViewCreated: (int id) {
        // 原生视图创建完成后,可以进行一些初始化操作
      },
    );
  }
}

然后,在原生平台的代码中创建并注册PlatformView,并处理Flutter端发送的消息:

在安卓端(Java)的代码示例:
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.common.StandardMessageCodec;

public class MainActivity extends FlutterActivity {
  private static final String CHANNEL = "com.example.native_view";

  @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
    super.configureFlutterEngine(flutterEngine);

    // 注册PlatformView
    flutterEngine.getPlatformViewsController().getRegistry().registerViewFactory(CHANNEL, new NativeViewFactory());

    // 创建MethodChannel对象
    MethodChannel methodChannel = new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL);
    methodChannel.setMethodCallHandler((call, result) -> {
      if (call.method.equals("sendMessage")) {
        String message = call.argument("message");
        // 处理Flutter端发送的消息
        handleSendMessage(message);
        result.success(null); // 返回结果给Flutter端
      } else {
        result.notImplemented();
      }
    });
  }

  private void handleSendMessage(String message) {
    // 处理接收到的消息
    System.out.println("Received message from Flutter: " + message);
  }
}
在iOS端(Objective-C)的代码示例
#import "AppDelegate.h"
#import <Flutter/Flutter.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  FlutterViewController* flutterViewController = (FlutterViewController*)self.window.rootViewController;

  // 注册PlatformView
  [flutterViewController.platformViewRegistry registerViewFactory:@"com.example.native_view" withBlock:^(id<FlutterBinaryMessenger> messenger, id arguments) {
    return [[NativeView alloc] initWithMessenger:messenger];
  }];

  // 创建MethodChannel对象
  FlutterMethodChannel* methodChannel = [FlutterMethodChannel methodChannelWithName:@"com.example.native_view" binaryMessenger:flutterViewController.binaryMessenger];
  [methodChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
    if ([call.method isEqualToString:@"sendMessage"]) {
      NSString* message = call.arguments[@"message"];
      // 处理Flutter端发送的消息
      [self handleSendMessage:message];
      result(nil); // 返回结果给Flutter端
    } else {
      result(FlutterMethodNotImplemented);
    }
  }];

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

- (void)handleSendMessage:(NSString*)message {
  // 处理接收到的消息
  NSLog(@"Received message from Flutter: %@", message);
}

@end

//
//
//

最后是使用Flutter Plugin进行通信

首先,在Flutter端创建一个Flutter插件,并定义与原生通信的方法:

 import 'package:flutter/services.dart';

class MyPlugin {
  static const MethodChannel _channel = MethodChannel('my_plugin');

  static Future<String> getPlatformVersion() async {
    final String version = await _channel.invokeMethod('getPlatformVersion');
    return version;
  }

  static Future<void> sendMessageToNative(String message) async {
    await _channel.invokeMethod('sendMessage', {'message': message});
  }
}

然后,在原生平台(安卓或iOS)的代码中实现Flutter插件的功能:

在安卓端(Java)的代码示例:
import io.flutter.embedding.engine.plugins.FlutterPlugin;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.common.MethodChannel.MethodCallHandler;
import io.flutter.plugin.common.MethodChannel.Result;

public class MyPlugin implements FlutterPlugin, MethodCallHandler {
  private MethodChannel methodChannel;

  @Override
  public void onAttachedToEngine(@NonNull FlutterPluginBinding flutterPluginBinding) {
    methodChannel = new MethodChannel(flutterPluginBinding.getBinaryMessenger(), "my_plugin");
    methodChannel.setMethodCallHandler(this);
  }

  @Override
  public void onMethodCall(@NonNull MethodCall call, @NonNull Result result) {
    if (call.method.equals("getPlatformVersion")) {
      String version = "Android " + android.os.Build.VERSION.RELEASE;
      result.success(version);
    } else if (call.method.equals("sendMessage")) {
      String message = call.argument("message");
      // 处理Flutter端发送的消息
      handleSendMessage(message);
      result.success(null);
    } else {
      result.notImplemented();
    }
  }

  private void handleSendMessage(String message) {
    // 处理接收到的消息
    System.out.println("Received message from Flutter: " + message);
  }

  @Override
  public void onDetachedFromEngine(@NonNull FlutterPluginBinding binding) {
    methodChannel.setMethodCallHandler(null);
  }
}
在iOS端(Objective-C)的代码示例:
#import <Flutter/Flutter.h>

@interface MyPlugin : NSObject<FlutterPlugin>
@end

@implementation MyPlugin

+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
 FlutterMethodChannel* channel = [FlutterMethodChannel
     methodChannelWithName:@"my_plugin"
           binaryMessenger:[registrar messenger]];
 MyPlugin* instance = [[MyPlugin alloc] init];
 [registrar addMethodCallDelegate:instance channel:channel];
}

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
 if ([call.method isEqualToString:@"getPlatformVersion"]) {
   NSString* version = [NSString stringWithFormat:@"iOS %@", [[UIDevice currentDevice] systemVersion]];
   result(version);
 } else if ([call.method isEqualToString:@"sendMessage"]) {
   NSString* message = call.arguments[@"message"];
   // 处理Flutter端发送的消息
   [self handleSendMessage:message];
   result(nil);
 } else {
   result(FlutterMethodNotImplemented);
 }
}

- (void)handleSendMessage:(NSString*)message {
 // 处理接收到的消息
 NSLog(@"Received message from Flutter: %@", message);
}

@end

相关文章

网友评论

      本文标题:flutter与原生通信的方式简介

      本文链接:https://www.haomeiwen.com/subject/syzmmdtx.html