1. 插件介绍

Flutter Multiple Flutters 是一个演示如何使用 Flutter Engine Groups API 在现有应用中嵌入多个 Flutter 实例的示例。该示例展示了如何高效地在同一应用中管理多个 Flutter 引擎实例，实现内存和 CPU 资源的共享，从而提升应用性能。

主要功能：

• 使用 Flutter Engine Groups API 嵌入多个 Flutter 实例
• 实现主机平台与多个 Flutter 实例之间的数据同步
• 支持多个 Flutter 入口点，每个入口点可配置不同的主题和初始状态
• 演示了 MethodChannel 在多引擎环境下的通信机制
• 集成了 url_launcher 插件，展示了跨平台能力

适用场景：

• 需要在现有应用中嵌入多个独立的 Flutter 模块
• 希望在同一应用中展示不同主题或功能的 Flutter 界面
• 需要实现主机平台与多个 Flutter 实例之间的数据共享
• 对应用性能要求较高，希望通过引擎资源共享减少内存占用

2. 如何使用插件

2.1 包的引入

在项目的 pubspec.yaml 文件中，添加以下依赖配置：

dependencies:
  multiple_flutters_module:
    git:
      url: "https://atomgit.com/flutter/samples.git"
      path: "add_to_app/multiple_flutters/multiple_flutters_module"
  
  # 如果需要使用 url_launcher 插件
  url_launcher:
    git:
      url: "https://atomgit.com/openharmony-tpc/flutter_packages.git"
      path: "packages/url_launcher/url_launcher"

然后运行 flutter pub get 命令获取依赖：

flutter pub get

2.2 配置 Flutter Engine Group

在鸿蒙应用的 EntryAbility.ets 文件中，初始化 Flutter Engine Group：

import { FlutterEngineGroup } from '@flutter/platform_ohos';

class EntryAbility extends Ability {
  private flutterEngineGroup: FlutterEngineGroup;
  
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    // 初始化 Flutter Engine Group
    this.flutterEngineGroup = new FlutterEngineGroup(this.context);
    
    // 其他初始化代码...
  }
  
  // 其他方法...
}

2.3 创建和管理 Flutter 引擎实例

使用 Engine Group 创建多个 Flutter 引擎实例：

// 创建第一个 Flutter 引擎实例（使用默认入口点）
const flutterEngine1 = this.flutterEngineGroup.createAndRunDefaultEngine();

// 创建第二个 Flutter 引擎实例（使用自定义入口点）
const flutterEngine2 = this.flutterEngineGroup.createAndRunWithEntrypoint(
  'topMain', // 入口点名称
  'main'     // Dart 主入口文件
);

// 创建第三个 Flutter 引擎实例
const flutterEngine3 = this.flutterEngineGroup.createAndRunWithEntrypoint(
  'bottomMain', // 入口点名称
  'main'        // Dart 主入口文件
);

2.4 嵌入 Flutter 视图

在鸿蒙页面中嵌入多个 Flutter 视图：

import { FlutterView } from '@flutter/platform_ohos';

class DoubleFlutterPage extends AbilitySlice {
  private componentContainer: ComponentContainer;
  
  onStart(): void {
    super.onStart();
    
    // 创建垂直布局
    const columnLayout = new Column();
    
    // 创建第一个 Flutter 视图
    const flutterView1 = new FlutterView(this);
    flutterView1.setSize(ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);
    flutterView1.attachToEngine(flutterEngine1);
    
    // 创建第二个 Flutter 视图
    const flutterView2 = new FlutterView(this);
    flutterView2.setSize(ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);
    flutterView2.attachToEngine(flutterEngine2);
    
    // 将 Flutter 视图添加到布局中
    columnLayout.addComponent(flutterView1);
    columnLayout.addComponent(flutterView2);
    
    // 设置页面内容
    this.componentContainer = this.findComponentById('component-container') as ComponentContainer;
    this.componentContainer.addComponent(columnLayout);
  }
  
  // 其他方法...
}

2.5 API 调用

2.5.1 多入口点配置

在 Flutter 模块的 main.dart 文件中，定义多个入口点：

// 默认入口点
void main() => runApp(const MyApp(color: Colors.blue));

// 顶部 Flutter 实例入口点
@pragma('vm:entry-point')
void topMain() => runApp(const MyApp(color: Colors.green));

// 底部 Flutter 实例入口点
@pragma('vm:entry-point')
void bottomMain() => runApp(const MyApp(color: Colors.purple));

2.5.2 数据同步

使用 MethodChannel 实现主机平台与 Flutter 实例之间的数据同步：

// Flutter 端代码
final _channel = const MethodChannel('multiple-flutters');

// 设置 MethodCallHandler
_channel.setMethodCallHandler((call) async {
  if (call.method == "setCount") {
    // 主机平台通知数据更新
    setState(() {
      _counter = call.arguments as int?;
    });
  }
});

// 向主机平台发送数据更新
void _incrementCounter() {
  _channel.invokeMethod<void>("incrementCount", _counter);
}

// 鸿蒙端代码
import { MethodChannel } from '@flutter/platform_ohos';

// 创建 MethodChannel
const channel = new MethodChannel(flutterEngine.dartExecutor.binaryMessenger, 'multiple-flutters');

// 设置 MethodCallHandler
channel.setMethodCallHandler((call, result) => {
  if (call.method === 'incrementCount') {
    // 处理 Flutter 发送的计数增加请求
    dataModel.incrementCount();
    result.success(null);
  } else if (call.method === 'next') {
    // 处理下一页请求
    router.pushNamed('next-page');
    result.success(null);
  }
});

// 向 Flutter 发送数据更新
channel.invokeMethod('setCount', dataModel.count);

2.5.3 使用 url_launcher 插件

import 'package:url_launcher/url_launcher.dart' as launcher;
import 'package:url_launcher/url_launcher_string.dart';

// 打开 Flutter 文档
ElevatedButton(
  onPressed: () async {
    final Uri url = Uri.parse('https://flutter.dev/docs');
    if (await launcher.canLaunchUrl(url)) {
      await launcher.launchUrl(url, webViewConfiguration: const WebViewConfiguration(headers: <String, String>{'harmony_browser_page': 'pages/LaunchInApp'}));
    }
  },
  child: const Text('Open Flutter Docs'),
),

3. 数据同步机制

该示例使用 Observer 设计模式和 Flutter 平台通道实现主机平台与多个 Flutter 实例之间的数据同步：

1. 数据的唯一真实来源位于主机平台的数据模型中
2. 每个显示 Flutter 内容的主机视图维护：Flutter 引擎、双向平台通道和主机数据模型的订阅
3. Flutter 实例维护它们感兴趣的数据的副本，这些数据在实例首次显示时由主机提供
4. Flutter 代码的突变通过通道发送到主机平台，主机平台执行突变，然后通知所有主机视图控制器和 Flutter 引擎新值
5. 主机代码的突变直接发生在数据模型上，数据模型通知主机视图控制器和 Flutter 引擎新值

4. 总结

Flutter Multiple Flutters 示例展示了如何高效地在鸿蒙应用中嵌入多个 Flutter 实例，通过 Flutter Engine Groups API 实现资源共享，提高应用性能。该示例提供了完整的多引擎管理、数据同步和跨平台通信方案，适合需要在现有应用中集成多个独立 Flutter 模块的场景。

通过本指南，您已经了解了如何：

1. 引入 multiple_flutters 模块和相关依赖
2. 配置和使用 Flutter Engine Group
3. 创建多个 Flutter 引擎实例和视图
4. 实现主机平台与 Flutter 实例之间的数据同步
5. 使用 MethodChannel 进行跨平台通信
6. 集成 url_launcher 等第三方插件

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net