一、FlutterPage插件介绍

FlutterPage是OpenHarmony平台上的一个核心组件，它允许开发者在OpenHarmony应用中无缝嵌入Flutter界面，实现混合开发架构。通过FlutterPage，开发者可以充分利用Flutter的跨平台能力和OpenHarmony的原生特性，构建高性能、富交互的全场景应用。

核心功能特点：

  • 无缝集成：在OpenHarmony页面中直接嵌入Flutter界面
  • 双向通信：支持Flutter与OpenHarmony原生层的高效通信
  • 混合UI开发：允许原生组件与Flutter组件叠加显示
  • 引擎管理：自动管理Flutter引擎的生命周期
  • 插件支持：兼容Flutter生态的各种插件

二、环境搭建

在使用FlutterPage之前，需要确保已经完成以下环境配置：

  1. DevEco Studio：安装最新版本的DevEco Studio（推荐4.0+）
  2. JDK 17：配置JDK 17环境变量
  3. Flutter SDK：下载并配置OpenHarmony版本的Flutter SDK
  4. 环境变量： 
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/path/to/flutter_flutter/bin:$PATH
export PATH=/path/to/ohos-sdk/ets/tools:$PATH

三、FlutterPage的引入与配置

由于FlutterPage是为OpenHarmony定制修改的版本，需要通过AtomGit以Git形式引入：

3.1 添加依赖

在OpenHarmony项目的pubspec.yaml文件中，添加FlutterPage的Git依赖：

dependencies:
  flutter_page:
    git:
      url: "https://atomgit.com/flutter-openharmony/flutter_page"
      path: "packages/flutter_page/flutter_page"

3.2 安装依赖

执行以下命令安装依赖：

flutter pub get

四、FlutterPage的使用步骤

4.1 EntryAbility继承FlutterAbility

在OpenHarmony应用的入口Ability中，需要继承FlutterAbility而不是默认的Ability，这样才能正确初始化和管理Flutter引擎：

export default class EntryAbility extends FlutterAbility {
  configureFlutterEngine(flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    // 注册Flutter插件
    GeneratedPluginRegistrant.registerWith(flutterEngine)
  }
}

4.2 创建OpenHarmony页面

使用DevEco Studio创建一个新的OpenHarmony页面：

  1. 打开ohos工程
  2. 右键点击ohos/entry/src/main/ets/pages目录
  3. 选择New->Page->Empty Page
  4. 输入页面名称，点击Finish

4.3 在页面中使用FlutterPage

在新创建的OpenHarmony页面中，可以通过以下方式嵌入FlutterPage：

import { LocalStorage } from '@ohos.app.ability.common';
import { Stack, Text } from '@ohos.arkui.widget';
import { FlutterPage } from '@ohos/flutter_page';

let storage = LocalStorage.getShared();

@Entry(storage)
@Component
struct FlutterContainerPage {
  private context = getContext(this) as common.UIAbilityContext;
  @LocalStorageLink('viewId') viewId: string = "flutter_main_view";

  build() {
    Stack({ alignContent: Alignment.Top }) {
      // 嵌入Flutter页面
      FlutterPage({ viewId: this.viewId })
      // 可以在FlutterPage上方叠加OpenHarmony原生组件
      Text('OpenHarmony原生组件 - 叠加在FlutterPage上方').margin(30)
    }
  }
}

4.4 Flutter与OpenHarmony通信

FlutterPage支持通过MethodChannel实现Flutter与OpenHarmony原生层的双向通信：

在Flutter端发送消息：
import 'package:flutter/services.dart';

class CommunicationManager {
  static const MethodChannel _channel = MethodChannel('flutter_openharmony_channel');

  // 发送消息到OpenHarmony
  static Future<String> sendMessageToOpenHarmony(String message) async {
    try {
      final String result = await _channel.invokeMethod('sendMessage', {'message': message});
      return result;
    } on PlatformException catch (e) {
      return 'Failed to send message: ${e.message}';
    }
  }
}
在OpenHarmony端接收消息：
import { MethodChannel } from '@ohos/flutter_page';

export default class EntryAbility extends FlutterAbility {
  configureFlutterEngine(flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine);
    GeneratedPluginRegistrant.registerWith(flutterEngine);

    // 注册MethodChannel
    const channel = new MethodChannel(flutterEngine, 'flutter_openharmony_channel');

    // 监听Flutter发送的消息
    channel.setMethodCallHandler((call, result) => {
      if (call.method === 'sendMessage') {
        const message = call.arguments['message'];
        console.log(`Received message from Flutter: ${message}`);
        // 处理消息并返回结果
        result.success('Message received by OpenHarmony: ' + message);
      } else {
        result.notImplemented();
      }
    });
  }
}

五、完整示例

以下是一个完整的FlutterPage使用示例，展示了如何在OpenHarmony应用中嵌入Flutter登录页面：

5.1 OpenHarmony端代码

import { LocalStorage } from '@ohos.app.ability.common';
import { Stack, Text, Button } from '@ohos.arkui.widget';
import { FlutterPage } from '@ohos/flutter_page';

let storage = LocalStorage.getShared();

@Entry(storage)
@Component
struct LoginContainerPage {
  private context = getContext(this) as common.UIAbilityContext;
  @LocalStorageLink('viewId') viewId: string = "flutter_login_view";

  build() {
    Stack() {
      // 嵌入Flutter登录页面
      FlutterPage({ viewId: this.viewId })

      // 原生标题栏
      Stack({
        width: '100%',
        height: 60,
        backgroundColor: '#007AFF'
      }) {
        Text('Flutter登录页面').fontSize(20).fontColor('#FFFFFF').margin({ left: 20, top: 15 })
      }

      // 原生返回按钮
      Button({
        type: ButtonType.Circle
      }, '←').width(40).height(40)
        .margin({ left: 10, top: 10 })
        .onClick(() => {
          // 返回上一页
          this.context.navigateBack();
        })
    }
  }
}

5.2 Flutter端代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  static const MethodChannel _channel = MethodChannel('flutter_openharmony_channel');

  Future<void> _handleLogin() async {
    final String username = _usernameController.text;
    final String password = _passwordController.text;

    try {
      // 发送登录信息到OpenHarmony原生层
      final String result = await _channel.invokeMethod('login', {
        'username': username,
        'password': password
      });

      if (result == 'success') {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('登录成功'))
        );
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('登录失败'))
        );
      }
    } on PlatformException catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('登录异常: ${e.message}'))
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 注意：Flutter的AppBar会被OpenHarmony的原生标题栏覆盖
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '用户登录',
              style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 48),
            TextField(
              controller: _usernameController,
              decoration: const InputDecoration(
                labelText: '用户名',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            TextField(
              controller: _passwordController,
              decoration: const InputDecoration(
                labelText: '密码',
                border: OutlineInputBorder(),
              ),
              obscureText: true,
            ),
            const SizedBox(height: 32),
            ElevatedButton(
              onPressed: _handleLogin,
              style: ElevatedButton.styleFrom(
                minimumSize: const Size.fromHeight(50),
              ),
              child: const Text('登录', style: TextStyle(fontSize: 18)),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(const MaterialApp(
    home: LoginPage(),
  ));
}

六、注意事项

  1. 视图ID管理：每个FlutterPage实例需要唯一的viewId，避免冲突
  2. 组件叠加顺序：通过Stack组件控制原生组件与Flutter组件的显示层级
  3. 性能优化：避免频繁创建和销毁FlutterPage实例
  4. 内存管理：确保在页面销毁时正确释放资源
  5. 插件兼容性：使用前验证Flutter插件是否兼容OpenHarmony平台

七、总结

FlutterPage为OpenHarmony开发者提供了强大的混合开发能力，使开发者能够充分利用Flutter生态的丰富资源和OpenHarmony的原生优势。通过本文的介绍，开发者可以快速掌握FlutterPage的使用方法，包括环境搭建、依赖引入、页面嵌入和双向通信等核心功能。

使用FlutterPage，开发者可以：

  • 实现Flutter与OpenHarmony的无缝集成
  • 构建高性能的混合UI应用
  • 充分利用两个生态的优势资源
  • 提高开发效率和应用质量

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

# harmonyos # 华为
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

鸿蒙PC：electron-markdownify 从普通 Electron 迁移到 OpenHarmony Electron HAP 的完整实践

avatar 开源鸿蒙跨平台开发者社区
cover

鸿蒙PC的包管理工具 Homebrew 正式上线，Harmonybrew介绍及使用指南

avatar 开源鸿蒙跨平台开发者社区
cover

14403黄大年茶思屋榜文144期第三题鸿蒙应用源码与IR一致性与健壮性评估

avatar 开源鸿蒙跨平台开发者社区