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

文章目录

- - [9. 与原生交互（下）](#9. 与原生交互（下）)
  - [9.3 优化原生交互性能](#9.3 优化原生交互性能)
  - - [9.3.1 减少跨平台通信次数](#9.3.1 减少跨平台通信次数)
    - [9.3.2 使用 `EventChannel` 实现流式通信](#9.3.2 使用 EventChannel 实现流式通信)
    - [9.3.3 使用 `Background Isolate` 处理耗时任务](#9.3.3 使用 Background Isolate 处理耗时任务)
  - [9.4 处理复杂的原生交互场景](#9.4 处理复杂的原生交互场景)
  - - [9.4.1 使用 `PlatformView` 嵌入原生 UI](#9.4.1 使用 PlatformView 嵌入原生 UI)
    - [9.4.2 使用 `FlutterEngineGroup` 实现多引擎](#9.4.2 使用 FlutterEngineGroup 实现多引擎)
  - 总结

9. 与原生交互（下）

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

9.3 优化原生交互性能

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

9.3.1 减少跨平台通信次数

问题：频繁调用原生方法会增加通信开销，导致性能下降。
解决方案：
- 将多个操作合并为一个原生方法调用。
- 使用批量处理（如一次性传递多个参数）。

示例：

dart 复制代码

// 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 端实现：

dart 复制代码

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 端实现：

java 复制代码

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 端实现：

objective-c 复制代码

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

@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 线程，提升应用响应速度。

示例：

dart 复制代码

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。

示例：

dart 复制代码

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。
- 每个引擎独立运行，互不干扰。

示例：

java 复制代码

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的精彩世界！

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

文章目录

9. 与原生交互（下）

9.3 优化原生交互性能

9.3.1 减少跨平台通信次数

9.3.2 使用 EventChannel 实现流式通信

9.3.3 使用 Background Isolate 处理耗时任务

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

9.4.1 使用 PlatformView 嵌入原生 UI

9.4.2 使用 FlutterEngineGroup 实现多引擎

总结

9.3.2 使用 `EventChannel` 实现流式通信

9.3.3 使用 `Background Isolate` 处理耗时任务

9.4.1 使用 `PlatformView` 嵌入原生 UI

9.4.2 使用 `FlutterEngineGroup` 实现多引擎