Flutter跨平台框架在开源鸿蒙中的使用与适配指南

最新推荐文章于 2025-12-23 22:07:27 发布

原创最新推荐文章于 2025-12-23 22:07:27 发布 · 384 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #开源 #harmonyos

1. Flutter框架介绍

Flutter是谷歌推出的高性能、跨平台UI框架，通过一套代码可以支持iOS、Android、Windows、Mac、Linux以及OpenHarmony等多个平台。Flutter采用自绘引擎Skia进行UI渲染，确保在不同平台上都能获得一致且流畅的用户体验。

1.1 Flutter框架核心特性

高性能渲染：基于Skia图形库，实现60fps甚至120fps的流畅动画效果
丰富的组件库：提供Material Design和Cupertino风格的UI组件，满足不同设计需求
热重载：开发过程中实时查看代码修改效果，提高开发效率
原生交互：通过MethodChannel和EventChannel实现Flutter与OpenHarmony原生代码的双向通信
多引擎管理：支持FlutterEngineGroup，在单应用中管理多个Flutter引擎实例
混合开发：支持将Flutter模块嵌入到OpenHarmony原生应用中

2. 环境搭建

2.1 安装开发工具

安装DevEco Studio：
- 从OpenHarmony开发套件官网下载最新版DevEco Studio
- 安装过程中会自动下载OpenHarmony SDK
安装JDK 17：
- 从Oracle官网或OpenJDK官网下载JDK 17
- 配置JAVA_HOME环境变量

下载OpenHarmony版Flutter：

git clone https://atomgit.com/openharmony-tpc/flutter_flutter.git
git checkout -b dev origin/dev

2.2 配置环境变量

打开终端，根据您的shell类型编辑相应的配置文件：

对于bash：vi ~/.bash_profile
对于zsh：vi ~/.zshrc

添加以下环境变量：

# 国内镜像（可选）
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# Flutter SDK路径
export PATH=/path/to/flutter_flutter/bin:$PATH

# OpenHarmony SDK相关
export TOOL_HOME=/Applications/DevEco-Studio.app/Contents  # macOS环境
export DEVECO_SDK_HOME=$TOOL_HOME/sdk
export PATH=$TOOL_HOME/tools/ohpm/bin:$PATH
export PATH=$TOOL_HOME/tools/hvigor/bin:$PATH
export PATH=$TOOL_HOME/tools/node/bin:$PATH

保存文件后，执行source ~/.bash_profile或source ~/.zshrc使配置生效。

2.3 验证环境

执行以下命令验证环境配置是否正确：

flutter doctor -v

确保Flutter和OpenHarmony相关项都显示为"OK"。

3. 创建Flutter项目

3.1 创建支持OpenHarmony的Flutter项目

# 创建仅支持OpenHarmony平台的项目
flutter create --platforms ohos my_flutter_app

# 创建支持多个平台（包括OpenHarmony）的项目
flutter create my_flutter_app

3.2 项目结构

创建完成后，项目目录结构如下：

my_flutter_app/
├── lib/                 # Flutter Dart代码
├── ohos/                # OpenHarmony原生代码
├── pubspec.yaml         # 项目依赖配置
└── README.md            # 项目说明文档

4. 引入自定义修改版本的Flutter包

由于OpenHarmony版的Flutter三方库是自定义修改版本，需要以Git形式从AtomGit引入。

4.1 在pubspec.yaml中添加依赖

dependencies:
  flutter:
    sdk: flutter

  # 以Git形式引入适配OpenHarmony的path_provider包
  path_provider:
    git:
      url: "https://atomgit.com/"
      path: "packages/path_provider/path_provider"

  # 以Git形式引入适配OpenHarmony的dio包
  dio:
    git:
      url: "https://atomgit.com/"
      path: "packages/dio/dio"

4.2 获取依赖

执行以下命令获取依赖：

flutter pub get

5. 使用示例

5.1 使用path_provider获取文件路径

import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.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 OpenHarmony Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const FilePathDemo(),
    );
  }
}

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

  @override
  State<FilePathDemo> createState() => _FilePathDemoState();
}

class _FilePathDemoState extends State<FilePathDemo> {
  String _tempPath = '';
  String _appDocPath = '';

  Future<void> getPaths() async {
    final tempDir = await getTemporaryDirectory();
    final appDocDir = await getApplicationDocumentsDirectory();

    setState(() {
      _tempPath = tempDir.path;
      _appDocPath = appDocDir.path;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('文件路径示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: getPaths,
              child: const Text('获取文件路径'),
            ),
            const SizedBox(height: 20),
            Text('临时目录: $_tempPath'),
            const SizedBox(height: 10),
            Text('应用文档目录: $_appDocPath'),
          ],
        ),
      ),
    );
  }
}

5.2 使用dio进行网络请求

import 'package:flutter/material.dart';
import 'package:dio/dio.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 OpenHarmony Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const NetworkRequestDemo(),
    );
  }
}

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

  @override
  State<NetworkRequestDemo> createState() => _NetworkRequestDemoState();
}

class _NetworkRequestDemoState extends State<NetworkRequestDemo> {
  String _response = '';
  bool _loading = false;

  Future<void> fetchData() async {
    setState(() {
      _loading = true;
      _response = '';
    });

    try {
      final dio = Dio();
      final response = await dio.get('https://jsonplaceholder.typicode.com/todos/1');

      setState(() {
        _response = response.data.toString();
      });
    } catch (e) {
      setState(() {
        _response = '请求失败: $e';
      });
    } finally {
      setState(() {
        _loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('网络请求示例')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: _loading ? null : fetchData,
                child: _loading ? const CircularProgressIndicator() : const Text('发起请求'),
              ),
              const SizedBox(height: 20),
              Expanded(
                child: SingleChildScrollView(
                  child: Text('响应结果: $_response'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

5. 与OpenHarmony原生代码通信

5.1 使用MethodChannel

Flutter端代码

import 'package:flutter/material.dart';
import 'package:flutter/services.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 OpenHarmony Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const NativeCommunicationDemo(),
    );
  }
}

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

  @override
  State<NativeCommunicationDemo> createState() => _NativeCommunicationDemoState();
}

class _NativeCommunicationDemoState extends State<NativeCommunicationDemo> {
  static const platform = MethodChannel('samples.flutter.dev/battery');
  String _batteryLevel = '未知';

  Future<void> _getBatteryLevel() async {
    String batteryLevel;
    try {
      final int result = await platform.invokeMethod('getBatteryLevel');
      batteryLevel = '电池电量: $result%';
    } on PlatformException catch (e) {
      batteryLevel = '获取电池电量失败: ${e.message}';
    }

    setState(() {
      _batteryLevel = batteryLevel;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('原生通信示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _getBatteryLevel,
              child: const Text('获取电池电量'),
            ),
            const SizedBox(height: 20),
            Text(_batteryLevel),
          ],
        ),
      ),
    );
  }
}

OpenHarmony ETS端代码

import { FlutterMethodChannel } from '@ohos/flutter_ohos';

// 在Ability中注册MethodChannel
class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    // 注册MethodChannel
    const batteryChannel = new FlutterMethodChannel('samples.flutter.dev/battery');
    batteryChannel.setMethodCallHandler((methodName, args, result) => {
      if (methodName === 'getBatteryLevel') {
        // 模拟获取电池电量
        const batteryLevel = 75;
        result.success(batteryLevel);
      } else {
        result.notImplemented();
      }
    });
  }
}

6. 构建与运行

6.1 构建HAP包

# 构建Debug版本
flutter build hap --debug

# 构建Release版本
flutter build hap --release

构建产物将生成在project/ohos/entry/build/default/outputs/default/目录下。

6.2 运行到设备

# 运行到指定设备
flutter run --debug -d device_id

# 运行到默认设备
flutter run --debug

7. 性能优化建议

7.1 使用const构造函数

在创建Widget时，尽可能使用const构造函数，减少不必要的重建：

// 推荐
const Text('Hello World');

// 不推荐
Text('Hello World');

7.2 合理使用状态管理

根据应用复杂度选择合适的状态管理方案，如Provider、Bloc或GetX。

7.3 图片优化

使用适当尺寸的图片，并考虑使用缓存机制：

Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  cacheWidth: 400,  // 缓存宽度
  cacheHeight: 400, // 缓存高度
);

8. 总结

Flutter框架已成功适配OpenHarmony平台，为开发者提供了一套完整的跨平台开发解决方案。通过本文的介绍，您可以了解到：

如何搭建Flutter OpenHarmony开发环境
如何创建支持OpenHarmony的Flutter项目
如何以Git形式引入自定义修改版本的Flutter包
如何使用常见的Flutter包（如path_provider、dio）
如何与OpenHarmony原生代码进行通信

Flutter与OpenHarmony的结合，实现了"一次开发，多端部署"的目标，为开发者提供了高效、高性能的跨平台开发体验。

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