一、混合开发Module介绍

Flutter混合开发Module是OpenHarmony平台上实现Flutter与原生应用无缝集成的核心解决方案。通过该方案，开发者可以在OpenHarmony原生工程中嵌入Flutter界面，充分利用Flutter的跨平台能力和OpenHarmony的原生特性。

核心功能

• 模块化集成：将Flutter代码打包为独立模块，便于在OpenHarmony工程中灵活引用
• 双向通信：支持Flutter与OpenHarmony原生层之间的方法调用和数据传递
• 资源共享：实现Flutter资源与OpenHarmony资源的统一管理
• 性能优化：通过引擎复用和资源预加载提升应用性能

二、环境准备

在开始使用Flutter混合开发Module前，请确保已完成以下环境配置：

1. 基础开发环境

• DevEco Studio：4.0及以上版本
• JDK：17.0及以上版本
• Flutter SDK：OpenHarmony适配版本
• Node.js：16.0及以上版本（用于npm命令）

2. 环境变量配置

# 设置Flutter包管理镜像
export PUB_HOSTED_URL=https://mirrors.huaweicloud.com/repository/flutter/
export FLUTTER_STORAGE_BASE_URL=https://mirrors.huaweicloud.com/repository/flutter/

# 添加Flutter和OpenHarmony工具到PATH
export PATH=/path/to/flutter_flutter/bin:$PATH
export PATH=/path/to/ohos/tools:$PATH

3. 验证环境

# 验证Flutter版本
flutter --version

# 验证OpenHarmony环境
hdc version

三、Flutter Module工程创建与配置

1. 创建Flutter Module

使用Flutter命令行工具创建Flutter Module工程：

# 创建Flutter Module工程
flutter create -t module my_flutter_module

# 进入工程目录
cd my_flutter_module

2. 配置Flutter Module

在my_flutter_module/pubspec.yaml中添加必要的依赖：

name: my_flutter_module
description: A Flutter module for OpenHarmony
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  # 通过AtomGit引入其他Flutter包
  flutter_page:
    git:
      url: "https://atomgit.com/flutter-openharmony/flutter_page"
      path: "packages/flutter_page/flutter_page"

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

3. 编写Flutter界面

在my_flutter_module/lib/main.dart中创建简单的Flutter界面：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Module Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Module Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

四、OpenHarmony工程引用方式

OpenHarmony工程可以通过两种方式引用Flutter Module：

方式一：引用HAR文件（推荐）

1. 编译生成HAR文件

在Flutter Module工程目录下执行以下命令生成HAR文件：

# 编译生成调试版本的HAR文件
flutter build har --debug

# 编译生成发布版本的HAR文件
flutter build har --release

2. 复制HAR文件到OpenHarmony工程

# 创建HAR文件目录
mkdir -p MyApplication/har/

# 复制生成的HAR文件
cp -r my_flutter_module/.ohos/har/* MyApplication/har/

3. 配置OpenHarmony工程依赖

在MyApplication/oh-package.json5中添加HAR文件依赖：

{
  "name": "myapplication",
  "version": "1.0.0",
  "description": "OpenHarmony application with Flutter module",
  "dependencies": {
    "@ohos/flutter_module": "har/flutter_module.har",
    "@ohos/flutter_ohos": "har/flutter.har"
  },
  "overrides": {
    "@ohos/flutter_ohos": "har/flutter.har"
  }
}

方式二：直接引用Flutter Module源码

1. 复制Flutter Module源码

# 复制Flutter Module源码到OpenHarmony工程
cp -r my_flutter_module/.ohos/flutter_module MyApplication/

# 创建资源目录并复制Flutter资源
mkdir -p MyApplication/flutter_module/src/main/resources/rawfile
cp -r my_flutter_module/.ohos/flutter_module/src/main/resources/rawfile/flutter_assets MyApplication/flutter_module/src/main/resources/rawfile

# 复制flutter.har文件
cp my_flutter_module/.ohos/har/flutter.har MyApplication/har/flutter.har

2. 配置工程模块

在MyApplication/build-profile.json5中添加Flutter Module模块：

{
  "app": {
    "signingConfigs": [],
    "compileSdkVersion": 9,
    "compatibleSdkVersion": 9,
    "products": [
      {
        "name": "default",
        "signingConfig": "default"
      }
    ]
  },
  "modules": [
    {
      "name": "entry",
      "srcPath": "./entry",
      "targets": [
        {
          "name": "default",
          "applyToProducts": ["default"]
        }
      ]
    },
    {
      "name": "flutter_module",
      "srcPath": "./flutter_module",
      "targets": [
        {
          "name": "default",
          "applyToProducts": ["default"]
        }
      ]
    }
  ]
}

3. 配置依赖

在MyApplication/oh-package.json5中添加源码依赖：

{
  "name": "myapplication",
  "version": "1.0.0",
  "description": "OpenHarmony application with Flutter module",
  "dependencies": {
    "flutter_module": "./flutter_module",
    "@ohos/flutter_ohos": "./har/flutter.har"
  },
  "overrides": {
    "@ohos/flutter_ohos": "./har/flutter.har"
  }
}

五、通过AtomGit引入依赖

对于需要在Flutter Module中使用的第三方包，可以通过AtomGit进行引入。以下是配置示例：

1. 在Flutter Module中引入依赖

在my_flutter_module/pubspec.yaml中添加AtomGit依赖：

dependencies:
  # 通过AtomGit引入path_provider包
  path_provider:
    git:
      url: "https://atomgit.com/flutter-openharmony/plugins"
      path: "packages/path_provider/path_provider"

  # 通过AtomGit引入shared_preferences包
  shared_preferences:
    git:
      url: "https://atomgit.com/flutter-openharmony/plugins"
      path: "packages/shared_preferences/shared_preferences"

2. 更新依赖

执行以下命令更新依赖：

flutter pub get

六、完整代码示例

1. Flutter Module入口配置

在my_flutter_module/.ohos/entry/src/main/ets/entryability/EntryAbility.ets中配置Flutter引擎：

import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
import { FlutterManager } from '@ohos/flutter_ohos';

export default class EntryAbility extends UIAbility {
  onCreate(want, launchParam) {
    console.log('EntryAbility onCreate');
    FlutterManager.getInstance().pushUIAbility(this);
  }

  onDestroy() {
    console.log('EntryAbility onDestroy');
    FlutterManager.getInstance().popUIAbility(this);
  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    console.log('EntryAbility onWindowStageCreate');
    FlutterManager.getInstance().pushWindowStage(this, windowStage);
    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        console.error('Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
      console.log('Succeeded in loading the content. Data: %{public}s', JSON.stringify(data));
    });
  }

  onWindowStageDestroy() {
    console.log('EntryAbility onWindowStageDestroy');
    FlutterManager.getInstance().popWindowStage(this);
  }

  onForeground() {
    console.log('EntryAbility onForeground');
  }

  onBackground() {
    console.log('EntryAbility onBackground');
  }
}

2. OpenHarmony页面配置

在MyApplication/entry/src/main/ets/pages/Index.ets中嵌入Flutter界面：

import { FlutterPage } from '@ohos/flutter_module';

@Entry
@Component
struct Index {
  @State message: string = 'OpenHarmony Native Page';

  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin(20)

      // 嵌入Flutter界面
      FlutterPage({
        viewId: 'flutter_view'
      })
      .width('100%')
      .height('70%')
      .margin(20)

      Button('Call Flutter Method')
        .onClick(() => {
          // 调用Flutter方法示例
          console.log('Call Flutter Method');
        })
    }
    .width('100%')
    .height('100%')
  }
}

七、运行与调试

1. 编译Flutter Module

cd my_flutter_module
flutter build har --debug
cd ..

2. 运行OpenHarmony工程

在DevEco Studio中打开MyApplication工程，连接OpenHarmony设备或模拟器，然后点击运行按钮。

八、总结

Flutter混合开发Module为OpenHarmony平台提供了强大的跨平台开发能力，通过以下步骤可以快速实现Flutter与OpenHarmony的无缝集成：

1. 环境准备：配置DevEco Studio、Flutter SDK和必要的环境变量
2. 创建Flutter Module：使用Flutter命令行工具创建模块化的Flutter工程
3. 配置依赖：通过AtomGit引入必要的Flutter包
4. 编译HAR文件：将Flutter Module打包为HAR文件
5. 集成到OpenHarmony：在OpenHarmony工程中引用HAR文件或源码
6. 配置界面：在OpenHarmony页面中嵌入Flutter界面
7. 运行调试：编译并运行混合开发应用

通过这种方式，开发者可以充分利用Flutter的跨平台能力和OpenHarmony的原生特性，构建高性能、高质量的跨平台应用。

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