插件介绍

Flutter-鸿蒙组件集成框架是一个专为开源鸿蒙（OpenHarmony）平台设计的跨平台UI解决方案，它允许开发者将现有的Flutter组件无缝集成到鸿蒙原生应用中，实现"一次开发，多端部署"的开发模式。该框架的核心价值在于：

  1. 跨平台UI复用：将现有的Flutter UI组件直接嵌入到鸿蒙应用中，无需重新开发
  2. 原生体验保持：在保持Flutter组件原有功能和性能的同时，提供与鸿蒙应用一致的用户体验
  3. 灵活的布局控制：支持对嵌入的Flutter组件进行尺寸、位置等布局属性的精确控制
  4. 双向通信支持：实现Flutter组件与鸿蒙原生代码之间的通信和数据交换
  5. 生命周期管理：自动处理Flutter组件的初始化、更新和释放，确保资源的高效利用

该框架为鸿蒙跨平台开发提供了一种高效的解决方案，特别适合需要复用现有Flutter UI组件的项目。

使用步骤

1. 环境准备

在使用Flutter-鸿蒙组件集成框架之前，需要确保开发环境已经配置完成：

  • Flutter SDK 2.19.6或更高版本
  • 鸿蒙开发工具DevEco Studio 3.0或更高版本
  • 鸿蒙SDK 3.0或更高版本
  • Node.js环境（用于鸿蒙项目构建）

2. 框架引入

在鸿蒙项目的oh-package.json5文件中添加Flutter-鸿蒙集成框架的依赖：

{
  "name": "component_demo",
  "version": "1.0.0",
  "description": "Flutter Component Demo for HarmonyOS",
  "main": "index.js",
  "scripts": {
    "build": "hvigorw"
  },
  "dependencies": {
    "@ohos/flutter_ohos": "^1.0.0"
  }
}

3. Flutter模块创建

在鸿蒙项目中创建Flutter模块，并实现所需的UI组件：

// lib/main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

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

  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),
      ),
    );
  }
}

4. Flutter组件在鸿蒙页面中的集成

创建一个鸿蒙页面，并在其中嵌入Flutter组件：

// FlutterIndex.ets
import common from '@ohos.app.ability.common';
import { FlutterPage } from '@ohos/flutter_ohos'
import Log from '@ohos/flutter_ohos/src/main/ets/util/Log'
import { FlutterComponentDelegate } from '@ohos/flutter_ohos/src/main/ets/embedding/ohos/FlutterComopnentDelegate';

const EVENT_BACK_PRESS = 'EVENT_BACK_PRESS'

@Component
export default struct Index {
  private context = getContext(this) as common.UIAbilityContext
  private delegate?: FlutterComponentDelegate | null;

  async aboutToAppear() {
    this.delegate = new FlutterComponentDelegate(this.context);
    await this?.delegate?.init();
  }

  aboutToDisappear() {
    this?.delegate?.release();
  }

  build() {
    Stack() {
      Column() {
        FlutterPage()
      }.onAreaChange(
        (oldValue: Area, newValue: Area) => {
          Log.i("Index", "onAreaChange oldValue:" + JSON.stringify(oldValue) + " newValue:" + JSON.stringify(newValue))
          this?.delegate?.updateView(vp2px(newValue.width as number), vp2px(newValue.height as number));
        }
      )
      .width("50%").height("50%").align(Alignment.Center)
    }.width("100%").height("100%")
  }

  onBackPress(): boolean {
    this.context.eventHub.emit(EVENT_BACK_PRESS)
    return true
  }
}

5. 在主页面中使用Flutter组件

将Flutter组件页面集成到应用的主页面中：

// Index.ets
import IndexPage from '../pages/FlutterIndex'
import router from '@ohos.router'
import ButtonClickMethod from '../model/ButtonClickMethod'

@Entry
@Component
struct Index {

  build() {
      Row() {
        IndexPage()
        Button("跳转原生page", {type: ButtonType.Capsule, stateEffect:true})
          .position({x:'50%', y:'100%'})
          .markAnchor({x:'50%', y:'100%'})
          .margin({ bottom:10 })
          .onClick(() => {
            ButtonClickMethod.toEntryAbilitySecond();
          })
      }
      .height('100%').backgroundColor(Color.Red);
  }
}

6. 页面跳转功能实现

实现鸿蒙原生页面之间的跳转功能：

// ButtonClickMethod.ets
import router from '@ohos.router'

class ButtonClickMethod {
  toEntryAbilitySecond() {
    router.pushUrl({
      url: 'pages/Second',
      params: {
      }
    })
  }
}
export default new ButtonClickMethod();

高级特性

1. Flutter组件尺寸和位置控制

Flutter-鸿蒙组件集成框架支持对嵌入的Flutter组件进行精确的尺寸和位置控制：

// 在FlutterIndex.ets中设置Flutter组件的尺寸和位置
Column() {
  FlutterPage()
}
.width("60%").height("70%").align(Alignment.TopRight)
.margin({ top: 50, right: 30 })

2. Flutter与鸿蒙原生通信

实现Flutter组件与鸿蒙原生代码之间的通信：

// Flutter代码中发送消息
import 'package:flutter/services.dart';

final _channel = MethodChannel('com.example.component_demo/channel');

void sendMessageToNative() async {
  try {
    await _channel.invokeMethod('messageFromFlutter', {'data': 'Hello from Flutter'});
  } on PlatformException catch (e) {
    print('Failed to send message: ${e.message}');
  }
}

// 鸿蒙原生代码中接收消息
import { MethodChannel } from '@ohos/flutter_ohos'

const channel = new MethodChannel('com.example.component_demo/channel');
channel.setMethodCallHandler((call, result) => {
  if (call.method === 'messageFromFlutter') {
    console.log('Message from Flutter: ' + call.arguments.data);
    result.success('Message received');
  } else {
    result.notImplemented();
  }
});

3. 生命周期管理优化

根据应用需求，对Flutter组件的生命周期进行更精细的控制：

// FlutterIndex.ets
async aboutToAppear() {
  // 初始化Flutter组件
  this.delegate = new FlutterComponentDelegate(this.context);
  await this?.delegate?.init();

  // 可以在这里进行一些初始化配置
  this?.delegate?.configure({
    enableLog: true,
    initialRoute: '/',
    // 其他配置项
  });
}

aboutToDisappear() {
  // 释放Flutter组件资源
  this?.delegate?.release();
}

// 当页面可见性变化时更新Flutter组件
onPageShow() {
  this?.delegate?.onPageShow();
}

onPageHide() {
  this?.delegate?.onPageHide();
}

常见问题与解决方案

1. Flutter组件无法正常显示

问题：在鸿蒙应用中嵌入的Flutter组件无法正常显示，或者显示异常。

解决方案：

  • 检查Flutter SDK版本是否与框架兼容
  • 确认Flutter组件的初始化代码是否正确执行
  • 检查Flutter组件的尺寸设置是否合理
  • 查看日志信息，定位具体的错误原因

2. 性能问题

问题：嵌入的Flutter组件运行时出现卡顿或性能不佳的情况。

解决方案：

  • 优化Flutter组件自身的性能，减少不必要的重绘
  • 合理设置Flutter组件的尺寸，避免过大的渲染区域
  • 避免在Flutter组件和鸿蒙原生代码之间进行过于频繁的数据交换
  • 确保Flutter组件在不需要时被正确释放

3. 通信失败

问题：Flutter组件与鸿蒙原生代码之间的通信失败。

解决方案：

  • 检查通信通道名称是否一致
  • 确认数据格式是否正确
  • 查看日志信息，定位具体的错误原因
  • 确保通信代码在正确的生命周期阶段执行

总结

Flutter-鸿蒙组件集成框架为鸿蒙跨平台开发提供了一种高效的解决方案，它允许开发者将现有的Flutter UI组件无缝集成到鸿蒙原生应用中，实现跨平台UI的复用和开发效率的提升。

该框架具有以下主要优势：

  1. 开发效率提升：复用现有的Flutter UI组件，减少重复开发工作
  2. 跨平台一致性：保持Flutter组件在不同平台上的功能和外观一致性
  3. 灵活的集成方式：支持对嵌入的Flutter组件进行精确的布局控制
  4. 良好的性能表现：在保持Flutter组件原有性能的同时，提供与鸿蒙应用一致的用户体验
  5. 完善的生命周期管理：自动处理Flutter组件的初始化、更新和释放，确保资源的高效利用

通过使用Flutter-鸿蒙组件集成框架，开发者可以快速构建高质量的鸿蒙跨平台应用，同时充分利用现有的Flutter技术栈和组件库。

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

# flutter # harmonyos # 华为
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

Flutter跨平台PlatformView鸿蒙化使用指南

avatar 人工智能6S服务平台
cover

Flutter跨平台外部纹理首帧鸿蒙化定制指南

avatar 人工智能6S服务平台
cover

Flutter跨平台FFI插件鸿蒙化开发与使用指南

avatar 人工智能6S服务平台