1. 插件介绍

Flutter Prebuilt Module 是一个演示如何将 Flutter 作为预构建库嵌入到现有鸿蒙应用中的示例。与直接从源代码编译 Flutter 模块不同，该示例将 Flutter 模块构建为预构建库，然后导入到鸿蒙应用中使用。

主要功能：

• 将 Flutter 模块构建为预构建库（支持 debug、profile 和 release 模式）
• 在现有鸿蒙应用中嵌入全屏 Flutter 实例
• 实现原生鸿蒙平台与 Flutter 模块之间的通信
• 使用 provider 进行状态管理
• 支持屏幕尺寸自适应

适用场景：

• 团队中部分开发者没有安装 Flutter 工具链，但需要构建包含 Flutter 功能的鸿蒙应用
• 需要加快应用构建速度，避免每次都从源代码编译 Flutter 模块
• 希望将 Flutter 功能作为独立模块分发和集成
• 需要在现有鸿蒙应用中逐步引入 Flutter 功能

2. 如何使用插件

2.1 包的引入

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

dependencies:
  flutter_module:
    git:
      url: "https://atomgit.com/flutter/samples.git"
      path: "add_to_app/prebuilt_module/flutter_module"
  
  # 如果需要单独使用 provider 插件
  provider:
    git:
      url: "https://atomgit.com/flutter/plugins.git"
      path: "packages/provider/provider"

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

flutter pub get

2.2 构建预构建 Flutter 模块

在将 Flutter 模块集成到鸿蒙应用之前，需要先将其构建为预构建库。运行以下命令：

# 进入 Flutter 模块目录
cd flutter_module

# 构建为鸿蒙可用的预构建库
flutter build ohos-library --output=../ohos_using_prebuilt_module/Flutter

该命令将在 ohos_using_prebuilt_module/Flutter 目录下生成 debug、profile 和 release 三种模式的预构建库。

2.3 在鸿蒙应用中集成预构建模块

1. 在鸿蒙应用的 module.json5 文件中，添加对预构建库的引用：

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "Flutter Prebuilt Module Example",
    "mainElement": "EntryAbility",
    "deviceTypes": ["phone", "tablet"],
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "feature"
    },
    "dependencies": [
      {
        "name": "flutter_prebuilt_module",
        "type": "har",
        "path": "./Flutter/debug/flutter_prebuilt_module.har"
      }
    ]
  }
}

2. 在鸿蒙应用的 build-profile.json5 文件中，添加预构建库的构建配置：

{
  "app": {
    "signingConfigs": [],
    "compileSdkVersion": 9,
    "compatibleSdkVersion": 9,
    "products": [
      {
        "name": "default",
        "signingConfig": "default"
      }
    ]
  },
  "modules": [
    {
      "name": "entry",
      "srcPath": "./entry",
      "targets": [
        {
          "name": "ohosTest"
        }
      ],
      "dependencies": [
        {
          "name": "flutter_prebuilt_module",
          "type": "har",
          "path": "./Flutter/debug/flutter_prebuilt_module.har"
        }
      ]
    }
  ]
}

2.4 初始化 Flutter 引擎

在鸿蒙应用的入口类中，初始化 Flutter 引擎：

import { FlutterEngine, FlutterView } from 'flutter_prebuilt_module';

class EntryAbility extends Ability {
  private flutterEngine: FlutterEngine;
  
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    super.onCreate(want, launchParam);
    
    // 初始化 Flutter 引擎
    this.flutterEngine = new FlutterEngine(this.context);
    
    // 运行 Flutter 引擎
    this.flutterEngine.run();
    
    // 其他初始化代码...
  }
  
  // 其他方法...
}

2.5 嵌入 Flutter 视图

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

import { FlutterView } from 'flutter_prebuilt_module';

class Index extends AbilitySlice {
  private componentContainer: ComponentContainer;
  
  onStart(): void {
    super.onStart();
    
    // 创建 Flutter 视图
    const flutterView = new FlutterView(this);
    flutterView.setSize(ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT);
    
    // 附加到 Flutter 引擎
    flutterView.attachToEngine(entryAbility.flutterEngine);
    
    // 设置页面内容
    this.componentContainer = this.findComponentById('component-container') as ComponentContainer;
    this.componentContainer.addComponent(flutterView);
  }
  
  // 其他方法...
}

2.6 API 调用

2.6.1 使用 MethodChannel 进行通信

// Flutter 端代码
class CounterModel extends ChangeNotifier {
  CounterModel() {
    _channel.setMethodCallHandler(_handleMessage);
    _channel.invokeMethod<void>('requestCounter');
  }

  final _channel = const MethodChannel('dev.flutter.example/counter');

  int _count = 0;

  int get count => _count;

  void increment() {
    _channel.invokeMethod<void>('incrementCounter');
  }

  Future<dynamic> _handleMessage(MethodCall call) async {
    if (call.method == 'reportCounter') {
      _count = call.arguments as int;
      notifyListeners();
    }
  }
}

// 鸿蒙端代码
import { MethodChannel } from 'flutter_prebuilt_module';

// 创建 MethodChannel
const channel = new MethodChannel(flutterEngine.dartExecutor.binaryMessenger, 'dev.flutter.example/counter');

// 设置 MethodCallHandler
channel.setMethodCallHandler((call, result) => {
  if (call.method === 'requestCounter') {
    // 返回当前计数器值
    result.success(this.counterValue);
  } else if (call.method === 'incrementCounter') {
    // 增加计数器值
    this.counterValue++;
    // 通知所有 Flutter 实例
    channel.invokeMethod('reportCounter', this.counterValue);
    result.success(null);
  }
});

2.6.2 使用 provider 进行状态管理

// 初始化应用
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  final model = CounterModel();
  
  runApp(
    ChangeNotifierProvider.value(
      value: model,
      child: const MyApp(),
    ),
  );
}

// 使用状态
Consumer<CounterModel>(
  builder: (context, model, child) {
    return Text(
      'Taps: ${model.count}',
      style: Theme.of(context).textTheme.headlineSmall,
    );
  },
),

3. 多模式构建

预构建 Flutter 模块支持三种构建模式，可以根据需要选择：

3.1 Debug 模式

flutter build ohos-library --debug --output=../ohos_using_prebuilt_module/Flutter

• 支持热重载和热重启
• 包含完整的调试信息
• 性能相对较低，适合开发阶段使用

3.2 Profile 模式

flutter build ohos-library --profile --output=../ohos_using_prebuilt_module/Flutter

• 包含调试信息但禁用了热重载
• 性能接近 Release 模式
• 适合性能分析和测试

3.3 Release 模式

flutter build ohos-library --release --output=../ohos_using_prebuilt_module/Flutter

• 优化了性能和大小
• 移除了调试信息
• 适合发布到应用商店

4. 页面路由

Flutter 模块提供了两个路由，可以根据需要使用：

// 全屏视图
'/': (context) => const FullScreenView(),

// 内容视图（适合嵌入到更大的 UI 中）
'/mini': (context) => const Contents(),

可以通过以下方式在鸿蒙应用中指定初始路由：

// 在初始化 Flutter 引擎时指定初始路由
this.flutterEngine = new FlutterEngine(this.context, {
  initialRoute: '/mini'
});

5. 总结

Flutter Prebuilt Module 示例展示了如何将 Flutter 作为预构建库嵌入到现有鸿蒙应用中，提供了一种无需每次从源代码编译 Flutter 模块的集成方式。该示例支持多种构建模式，可以根据开发和发布需求选择合适的模式。

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

1. 引入 Flutter Prebuilt Module 依赖
2. 将 Flutter 模块构建为预构建库
3. 在鸿蒙应用中集成预构建模块
4. 初始化 Flutter 引擎并嵌入 Flutter 视图
5. 使用 MethodChannel 实现原生平台与 Flutter 之间的通信
6. 使用 provider 进行状态管理
7. 选择合适的构建模式
8. 使用不同的页面路由

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