一周掌握Flutter开发--9. 与原生交互（下）

9. 与原生交互（下）

在上一部分中，我们介绍了如何使用 MethodChannel 和社区插件（如 camera 和 geolocator）实现 Flutter 与原生代码的交互。接下来，我们将深入探讨如何优化原生交互的性能，以及如何处理更复杂的原生交互场景。

---

9.3 优化原生交互性能

原生交互可能会涉及跨平台通信，如果处理不当，可能会导致性能问题。以下是优化原生交互性能的关键技巧。

---

9.3.1 减少跨平台通信次数

• 问题：频繁调用原生方法会增加通信开销，导致性能下降。

• 解决方案：

  • 将多个操作合并为一个原生方法调用。
  • 使用批量处理（如一次性传递多个参数）。

• 示例：

  // Flutter 端
  static Future<void> sendData(List<String> data) async {
    try {
      await platform.invokeMethod('sendData', data);
    } on PlatformException catch (e) {
      print('Failed to send data: ${e.message}');
    }
  }
  
  // Android 端
  @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
      new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
          .setMethodCallHandler(
              (call, result) -> {
                  if (call.method.equals("sendData")) {
                      List<String> data = call.arguments();
                      // 处理数据
                      result.success(null);
                  } else {
                      result.notImplemented();
                  }
              }
          );
  }
  

---

9.3.2 使用 EventChannel 实现流式通信

• 适用场景：当需要从原生代码向 Flutter 持续发送数据时（如传感器数据、实时位置更新）。

• 优势：避免频繁调用 MethodChannel，减少通信开销。

• Flutter 端实现：

  import 'package:flutter/services.dart';
  
  class NativeEventChannel {
    static const eventChannel = EventChannel('com.example.app/events');
  
    static Stream<String> get events {
      return eventChannel.receiveBroadcastStream().map((event) => event.toString());
    }
  }
  
  void listenToEvents() {
    NativeEventChannel.events.listen((event) {
      print('Event: $event');
    });
  }
  

• Android 端实现：

  import io.flutter.plugin.common.EventChannel;
  
  public class MainActivity extends FlutterActivity {
      private static final String EVENT_CHANNEL = "com.example.app/events";
  
      @Override
      public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
          new EventChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), EVENT_CHANNEL)
              .setStreamHandler(
                  new EventChannel.StreamHandler() {
                      @Override
                      public void onListen(Object arguments, EventChannel.EventSink events) {
                          // 发送事件
                          events.success("Event 1");
                          events.success("Event 2");
                      }
  
                      @Override
                      public void onCancel(Object arguments) {
                          // 清理资源
                      }
                  }
              );
      }
  }
  

• iOS 端实现：

  #import "AppDelegate.h"
  #import 
  
  @implementation AppDelegate
  
  - (BOOL)application:(UIApplication *)application
      didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
      FlutterViewController* controller = (FlutterViewController*)self.window.rootViewController;
  
      FlutterEventChannel* eventChannel = [FlutterEventChannel
          eventChannelWithName:@"com.example.app/events"
          binaryMessenger:controller.binaryMessenger];
  
      [eventChannel setStreamHandler:self];
  
      return [super application:application didFinishLaunchingWithOptions:launchOptions];
  }
  
  - (FlutterError*)onListenWithArguments:(id)arguments eventSink:(FlutterEventSink)events {
      // 发送事件
      events(@"Event 1");
      events(@"Event 2");
      return nil;
  }
  
  - (FlutterError*)onCancelWithArguments:(id)arguments {
      // 清理资源
      return nil;
  }
  
  @end
  

---

9.3.3 使用 Background Isolate 处理耗时任务

• 适用场景：当原生方法需要执行耗时操作时（如文件读写、网络请求）。

• 优势：避免阻塞 UI 线程，提升应用响应速度。

• 示例：

  void performHeavyTask() async {
    final receivePort = ReceivePort();
    await Isolate.spawn(_heavyTask, receivePort.sendPort);
  
    receivePort.listen((message) {
      print('Task completed: $message');
    });
  }
  
  void _heavyTask(SendPort sendPort) {
    // 模拟耗时任务
    for (int i = 0; i < 1000000000; i++) {}
    sendPort.send('Done');
  }
  

---

9.4 处理复杂的原生交互场景

在某些场景下，可能需要处理更复杂的原生交互，例如自定义 UI、深度集成硬件功能等。

---

9.4.1 使用 PlatformView 嵌入原生 UI

• 适用场景：需要在 Flutter 中嵌入原生 UI 组件（如地图、WebView）。

• 实现方式：

  • Android：使用 AndroidView。
  • iOS：使用 UiKitView。

• 示例：

  import 'package:flutter/material.dart';
  import 'package:flutter/services.dart';
  
  class NativeView extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      if (defaultTargetPlatform == TargetPlatform.android) {
        return AndroidView(
          viewType: 'com.example.app/nativeView',
          creationParams: {'text': 'Hello from Flutter'},
          creationParamsCodec: StandardMessageCodec(),
        );
      } else if (defaultTargetPlatform == TargetPlatform.iOS) {
        return UiKitView(
          viewType: 'com.example.app/nativeView',
          creationParams: {'text': 'Hello from Flutter'},
          creationParamsCodec: StandardMessageCodec(),
        );
      } else {
        return Text('Platform not supported');
      }
    }
  }
  

---

9.4.2 使用 FlutterEngineGroup 实现多引擎

• 适用场景：需要在同一个应用中运行多个 Flutter 实例（如分屏、多窗口）。

• 实现方式：

  • 使用 FlutterEngineGroup 创建多个 FlutterEngine。
  • 每个引擎独立运行，互不干扰。

• 示例：

  import io.flutter.embedding.android.FlutterActivity;
  import io.flutter.embedding.engine.FlutterEngine;
  import io.flutter.embedding.engine.FlutterEngineGroup;
  
  public class MainActivity extends FlutterActivity {
      private FlutterEngineGroup engineGroup;
  
      @Override
      public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
          engineGroup = new FlutterEngineGroup(this);
          FlutterEngine secondEngine = engineGroup.createAndRunDefaultEngine(this);
          // 使用 secondEngine 启动另一个 Flutter 实例
      }
  }
  

---

总结

• 优化性能：减少跨平台通信次数，使用 EventChannel 和 Background Isolate。
• 复杂场景：使用 PlatformView 嵌入原生 UI，使用 FlutterEngineGroup 实现多引擎。

通过掌握这些高级技巧，你可以更高效地实现 Flutter 与原生代码的交互，并处理复杂的应用场景。

---

结束语
Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的精彩世界！