Native 与 Flutter 混合开发中的 Flutter 多引擎与单引擎分析

1. 引言

随着 Flutter 的普及，越来越多的开发者选择在原生（Native）应用中集成 Flutter，以利用其跨平台的优势。在这种混合开发的场景下，开发者需决定使用单引擎还是多引擎的架构。本文将分析这两种架构的不同点，并探讨它们在初始化 Flutter 引擎时的具体处理方式，以及与原生的通信与相互调用，包括 Flutter 调用原生视图的不同处理方式。

2. 单引擎与多引擎的主要区别

2.1 引擎数量

  • 单引擎：只使用一个 Flutter 引擎，所有 Flutter 页面和原生页面通过该引擎进行渲染和交互。
  • 多引擎：可以使用多个 Flutter 引擎，每个引擎可以为不同的功能模块或特性服务。

2.2 性能

  • 单引擎：资源利用率高，启动时间较低，适合频繁切换 Flutter 与原生之间的场景。
  • 多引擎：可能导致更高的内存占用和启动时间，多个引擎间的切换也可能影响性能。

2.3 状态管理

  • 单引擎：状态管理较为简单，所有 Flutter 页面共享同一个引擎和状态，数据传递更直接。
  • 多引擎：每个引擎的状态独立，跨引擎的状态管理需要额外的通信机制。

2.4 开发复杂性

  • 单引擎：开发和维护相对简单，易于调试。
  • 多引擎：管理多个引擎的复杂性较高，需要处理引擎间的通信和状态同步问题。

3. 初始化 Flutter 引擎的不同方式

3.1 单引擎初始化

  1. 创建引擎实例：

    • 在应用启动时创建一个 Flutter 引擎实例，该实例在整个应用生命周期中保持存在。
    dart
     代码解读
    复制代码
    void main() {
    runApp(MyApp());
}

  2. 使用默认设置：

    • 单引擎的初始化过程通常使用 Flutter 提供的默认设置，开发者无需频繁调整配置。

  3. 引擎与平台通道：

    • 在引擎初始化后，构建与原生代码的通信通道（Platform Channels）。
    dart
     代码解读
    复制代码
    const platform = MethodChannel('com.example.methodchannel');

  4. 状态管理：

    • 使用统一的状态管理方案（如 Provider、Bloc 等），确保状态在 Flutter 模块内的统一性。

3.2 多引擎初始化

  1. 创建多个引擎实例：

    • 根据需求在不同的地方创建多个 Flutter 引擎实例，每个引擎可能在不同的线程中运行。
    java
     代码解读
    复制代码
    FlutterEngine flutterEngine1 = new FlutterEngine(context);
FlutterEngine flutterEngine2 = new FlutterEngine(context);

  2. 配置引擎：

    • 每个引擎可以有不同的初始化参数和配置，开发者需根据需求显式设置。
    java
     代码解读
    复制代码
    flutterEngine1.getDartExecutor().executeDartEntrypoint(
    DartExecutor.DartEntrypoint.createDefault()
);

  3. 引擎与平台通道：

    • 每个 Flutter 引擎需要独立的 Platform Channels，原生层需管理这些通道以正确转发消息。
    java
     代码解读
    复制代码
    MethodChannel channel1 = new MethodChannel(flutterEngine1.getDartExecutor().getBinaryMessenger(), "channel1");
MethodChannel channel2 = new MethodChannel(flutterEngine2.getDartExecutor().getBinaryMessenger(), "channel2");

  4. 状态管理：

    • 由于每个引擎都有自己的状态，跨引擎的状态管理需要额外机制（如事件总线、消息队列等）来实现。

4. 原生与 Flutter 的通信与相互调用

4.1 单引擎下的通信

在单引擎架构中，原生与 Flutter 的通信相对简单，主要通过 Platform Channels 来实现双向通信。

  1. 原生调用 Flutter：

    • 使用 MethodChannel 从原生代码调用 Flutter 方法。
    java
     代码解读
    复制代码
    MethodChannel channel = new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), "com.example.methodchannel");
channel.invokeMethod("methodName", arguments);

  2. Flutter 调用原生：

    • 在 Flutter 侧，使用相同的 MethodChannel 进行原生方法的调用。
    dart
     代码解读
    复制代码
    final platform = MethodChannel('com.example.methodchannel');
try {
    final result = await platform.invokeMethod('methodName', arguments);
} on PlatformException catch (e) {
    print("Failed to call method: '${e.message}'.");
}

4.2 多引擎下的通信

在多引擎架构中，原生与 Flutter 的通信变得更加复杂，因为每个引擎都有其独立的通信通道。

  1. 原生调用 Flutter：

    • 每个 Flutter 引擎都有自己的 MethodChannel。原生层需要确定要调用哪个引擎的通道。
    java
     代码解读
    复制代码
    MethodChannel channel1 = new MethodChannel(flutterEngine1.getDartExecutor().getBinaryMessenger(), "channel1");
channel1.invokeMethod("methodName", arguments);

  2. Flutter 调用原生：

    • 在 Flutter 侧，开发者需要确保使用正确的 MethodChannel 对应到特定的引擎。
    dart
     代码解读
    复制代码
    final platform1 = MethodChannel('channel1');
try {
    final result1 = await platform1.invokeMethod('methodName', arguments);
} on PlatformException catch (e) {
    print("Failed to call method: '${e.message}'.");
}

  3. 跨引擎通信：

    • 对于需要跨引擎调用的场景，可能需要通过原生层实现中转，例如通过一个共享的原生组件来管理消息传递。

5. Flutter 调用原生视图的处理方式

5.1 单引擎下的视图调用

在单引擎下，Flutter 可以通过原生的视图接口直接调用原生视图，通常使用 PlatformView 来实现。

  1. 创建原生视图：

    • 在原生代码中实现一个视图，并注册它。
    java
     代码解读
    复制代码
    public class MyNativeView extends View {
    // 实现视图的逻辑
}

  2. 在 Flutter 中使用：

    • 在 Flutter 中通过 PlatformView 来嵌入原生视图。
    dart
     代码解读
    复制代码
    import 'package:flutter/services.dart';

class NativeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return UiKitView(
      viewType: 'MyNativeView',
      onPlatformViewCreated: (int viewId) {
        // 可在这里与原生视图交互
      },
    );
  }
}

5.2 多引擎下的视图调用

在多引擎架构下，调用原生视图的过程与单引擎类似，但需要特别注意每个引擎的视图管理。

  1. 创建和注册原生视图：

    • 每个 Flutter 引擎需要独立注册其视图类型。
    java
     代码解读
    复制代码
    public class MyNativeViewFactory extends PlatformViewFactory {
    @Override
    public PlatformView create(Context context, int viewId, Object args) {
        return new MyNativeView(context);
    }
}

  2. 在 Flutter 中使用：

    • 在 Flutter 中使用 PlatformView 时，需要确保调用的是正确的引擎所注册的视图。
    dart
     代码解读
    复制代码
    class NativeView extends StatelessWidget {
  final String viewType;

  NativeView({required this.viewType});

  @override
  Widget build(BuildContext context) {
    return PlatformViewLink(
      viewType: viewType,
      onCreatePlatformView: (PlatformViewCreationParams params) {
        // 创建和配置原生视图
      },
      surfaceFactory: (BuildContext context, PlatformViewController controller) {
        return PlatformViewSurface(
          controller: controller,
          gestureRecognizers: const >{},
        );
      },
    );
  }
}

5.3 总结

在单引擎架构中，原生视图的调用相对简单，Flutter 通过 PlatformView 直接与原生视图交互。而在多引擎架构中，开发者需要管理多个视图注册和创建，确保每个引擎的视图能够正确地被 Flutter 调用。选择合适的架构和视图管理方式，将直接影响应用的性能和开发效率。

6. 总结

在 Flutter 与 Native 应用的混合开发中，选择单引擎或多引擎架构会影响性能、复杂性和开发方式。在原生与 Flutter 的通信方面，单引擎的实现相对简单，而多引擎则需要处理多个独立的通信通道和跨引擎调用的问题。此外，Flutter 调用原生视图的方法也因架构不同而有所区别。在做出选择时，需要综合考虑项目需求、团队经验和维护性。选择合适的引擎架构和视图调用方式将为应用的成功奠定基础。

注：本文转载自juejin.cn的稻城亚丁有沉香的文章"https://juejin.cn/post/7482003475900989492"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！