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

前言：跨生态开发的新机遇

在移动开发领域，我们总是面临着选择与适配。今天，你的Flutter应用在Android和iOS上跑得正欢，明天可能就需要考虑一个新的平台：HarmonyOS（鸿蒙）。这不是一道选答题，而是很多团队正在面对的现实。

Flutter的优势很明确——写一套代码，就能在两个主要平台上运行，开发体验流畅。而鸿蒙代表的是下一个时代的互联生态，它不仅仅是手机系统，更着眼于未来全场景的体验。将现有的Flutter应用适配到鸿蒙，听起来像是一个“跨界”任务，但它本质上是一次有价值的技术拓展：让产品触达更多用户，也让技术栈覆盖更广。

不过，这条路走起来并不像听起来那么简单。Flutter和鸿蒙，从底层的架构到上层的工具链，都有着各自的设计逻辑。会遇到一些具体的问题：代码如何组织？原有的功能在鸿蒙上如何实现？那些平台特有的能力该怎么调用？更实际的是，从编译打包到上架部署，整个流程都需要重新摸索。
这篇文章想做的，就是把这些我们趟过的路、踩过的坑，清晰地摊开给你看。我们不会只停留在“怎么做”，还会聊到“为什么得这么做”，以及“如果出了问题该往哪想”。这更像是一份实战笔记，源自真实的项目经验，聚焦于那些真正卡住过我们的环节。

无论你是在为一个成熟产品寻找新的落地平台，还是从一开始就希望构建能面向多端的应用，这里的思路和解决方案都能提供直接的参考。理解了两套体系之间的异同，掌握了关键的衔接技术，不仅能完成这次迁移，更能积累起应对未来技术变化的能力。

混合工程结构深度解析

项目目录架构

当Flutter项目集成鸿蒙支持后，典型的项目结构会发生显著变化。以下是经过ohos_flutter插件初始化后的项目结构：

my_flutter_harmony_app/
├── lib/                          # Flutter业务代码（基本不变）
│   ├── main.dart                 # 应用入口
│   ├── home_page.dart           # 首页
│   └── utils/
│       └── platform_utils.dart  # 平台工具类
├── pubspec.yaml                  # Flutter依赖配置
├── ohos/                         # 鸿蒙原生层（核心适配区）
│   ├── entry/                    # 主模块
│   │   └── src/main/
│   │       ├── ets/              # ArkTS代码
│   │       │   ├── MainAbility/
│   │       │   │   ├── MainAbility.ts       # 主Ability
│   │       │   │   └── MainAbilityContext.ts
│   │       │   └── pages/
│   │       │       ├── Index.ets           # 主页面
│   │       │       └── Splash.ets          # 启动页
│   │       ├── resources/        # 鸿蒙资源文件
│   │       │   ├── base/
│   │       │   │   ├── element/  # 字符串等
│   │       │   │   ├── media/    # 图片资源
│   │       │   │   └── profile/  # 配置文件
│   │       │   └── en_US/        # 英文资源
│   │       └── config.json       # 应用核心配置
│   ├── ohos_test/               # 测试模块
│   ├── build-profile.json5      # 构建配置
│   └── oh-package.json5         # 鸿蒙依赖管理
└── README.md

展示效果图片

flutter 实时预览 效果展示
在这里插入图片描述

运行到鸿蒙虚拟设备中效果展示
在这里插入图片描述

目录

引入第三方库 flutter_svg

在项目中引入了 flutter_svg 库，版本为 ^2.0.10，用于绘制 SVG 图标。在 pubspec.yaml 文件中添加了如下依赖：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  flutter_svg: ^2.0.10

功能代码实现

SVG 图标组件

创建了一个 SvgIcons 组件，用于展示和交互 SVG 图标。该组件包含以下功能：

  • 展示多个 SVG 图标
  • 图标点击交互效果
  • 选中状态显示
  • 点击反馈提示

组件实现

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

class SvgIcons extends StatefulWidget {
  const SvgIcons({super.key});

  @override
  State<SvgIcons> createState() => _SvgIconsState();
}

class _SvgIconsState extends State<SvgIcons> {
  int _selectedIconIndex = -1;

  final List<Map<String, dynamic>> _icons = [
    {
      'name': 'Home',
      'svg': '''
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
          <polyline points="9 22 9 12 15 12 15 22"></polyline>
        </svg>
      ''',
    },
    {
      'name': 'Settings',
      'svg': '''
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="3"></circle>
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
        </svg>
      ''',
    },
    {
      'name': 'User',
      'svg': '''
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
          <circle cx="12" cy="7" r="4"></circle>
        </svg>
      ''',
    },
    {
      'name': 'Mail',
      'svg': '''
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
          <polyline points="22,6 12,13 2,6"></polyline>
        </svg>
      ''',
    },
    {
      'name': 'Phone',
      'svg': '''
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
        </svg>
      ''',
    },
    {
      'name': 'Camera',
      'svg': '''
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
          <circle cx="12" cy="13" r="4"></circle>
        </svg>
      ''',
    },
    {
      'name': 'Clock',
      'svg': '''
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
      ''',
    },
    {
      'name': 'Map',
      'svg': '''
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
          <circle cx="12" cy="10" r="3"></circle>
        </svg>
      ''',
    },
  ];

  void _onIconTap(int index) {
    setState(() {
      _selectedIconIndex = index;
    });

    // 显示点击反馈
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('You selected: ${_icons[index]['name']}'),
        duration: const Duration(seconds: 1),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SVG 图标展示'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text(
              '点击下方图标查看效果:',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 24),
            
            // 图标网格
            Expanded(
              child: GridView.builder(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 4,
                  crossAxisSpacing: 16,
                  mainAxisSpacing: 16,
                ),
                itemCount: _icons.length,
                itemBuilder: (context, index) {
                  final icon = _icons[index];
                  final isSelected = _selectedIconIndex == index;
                  
                  return GestureDetector(
                    onTap: () => _onIconTap(index),
                    child: Container(
                      decoration: BoxDecoration(
                        color: isSelected ? Colors.deepPurple.shade100 : Colors.white,
                        border: Border.all(
                          color: isSelected ? Colors.deepPurple : Colors.grey.shade300,
                          width: isSelected ? 2 : 1,
                        ),
                        borderRadius: BorderRadius.circular(8),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey.withAlpha(51), // 0.2 opacity
                            spreadRadius: 2,
                            blurRadius: 4,
                            offset: const Offset(0, 2),
                          ),
                        ],
                      ),
                      padding: const EdgeInsets.all(16),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          SvgPicture.string(
                            icon['svg'],
                            width: 40,
                            height: 40,
                            colorFilter: ColorFilter.mode(
                              isSelected ? Colors.deepPurple : Colors.grey.shade700,
                              BlendMode.srcIn,
                            ),
                          ),
                          const SizedBox(height: 4),
                          Text(
                            icon['name'],
                            style: TextStyle(
                              fontSize: 10,
                              fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                              color: isSelected ? Colors.deepPurple : Colors.grey.shade700,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
            
            const SizedBox(height: 24),
            
            // 选中状态显示
            if (_selectedIconIndex != -1)
              Card(
                elevation: 4,
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Row(
                    children: [
                      SvgPicture.string(
                        _icons[_selectedIconIndex]['svg'],
                        width: 32,
                        height: 32,
                        colorFilter: ColorFilter.mode(
                          Colors.deepPurple,
                          BlendMode.srcIn,
                        ),
                      ),
                      const SizedBox(width: 16),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children:
                          [
                            const Text(
                              '当前选中:',
                              style: TextStyle(
                                fontSize: 14,
                                color: Colors.grey,
                              ),
                            ),
                            Text(
                              _icons[_selectedIconIndex]['name'],
                              style: const TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.bold,
                                color: Colors.deepPurple,
                              ),
                            ),
                          ],
                      ),
                    ],
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

集成到首页

在 main.dart 文件中，将 SvgIcons 组件集成到首页：

import 'package:flutter/material.dart';
import 'package:aa/components/svg_icons.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter for openHarmony',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Flutter for openHarmony'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return const SvgIcons();
  }
}

组件使用方法

  1. 引入组件：在需要使用 SVG 图标组件的文件中，导入 svg_icons.dart 文件。

  2. 添加到页面：将 SvgIcons 组件添加到页面的 build 方法中。

  3. 交互操作：点击图标会显示选中状态，并通过 SnackBar 显示点击反馈。

开发注意事项

  1. SVG 图标尺寸：根据容器大小调整 SVG 图标的尺寸，避免布局溢出。

  2. 颜色设置：使用 colorFilter 属性设置图标的颜色，确保在不同背景下可见。

  3. 布局适配：使用 GridView 时，注意设置合理的交叉轴数量和间距，以适应不同屏幕尺寸。

  4. 性能优化：对于大量 SVG 图标，考虑使用缓存机制，避免频繁重建。

本次开发中容易遇到的问题

  1. 依赖安装问题：

    • 确保在 pubspec.yaml 文件中正确添加了 flutter_svg 依赖
    • 运行 flutter pub get 来安装依赖

  2. SVG 语法问题：

    • 确保 SVG 代码格式正确，特别是 XML 语法
    • 注意 SVG 中的命名空间和属性

  3. 图标显示问题：

    • 确保 SVG 图标尺寸合适，避免布局溢出
    • 注意图标的颜色设置，确保在不同背景下可见

  4. 性能问题：

    • 对于大量 SVG 图标，考虑使用缓存
    • 避免在滚动时频繁重建 SVG 图标

  5. OpenHarmony 适配：

    • 确保 SVG 功能在 OpenHarmony 平台上正常运行
    • 测试不同屏幕尺寸下的显示效果

  6. 布局溢出问题：

    • 当 GridView 单元格空间有限时，需要调整图标大小和间距
    • 使用 withAlpha 代替 withOpacity 以避免弃用警告

  7. 颜色属性弃用：

    • SvgPicture 的 color 属性已弃用，应使用 colorFilter 代替

总结本次开发中用到的技术点

  1. Flutter 组件化开发：

    • 创建了独立的 SvgIcons 组件
    • 实现了组件的状态管理和生命周期

  2. 第三方库集成：

    • 集成了 flutter_svg 库用于绘制 SVG 图标
    • 了解了如何在 Flutter 项目中添加和使用第三方依赖

  3. SVG 图标使用：

    • 使用 SvgPicture.string 加载内联 SVG 代码
    • 实现了 SVG 图标的颜色和尺寸控制
    • 使用 colorFilter 属性设置图标颜色

  4. 用户交互：

    • 实现了图标点击事件处理
    • 添加了选中状态和视觉反馈
    • 使用 SnackBar 提供操作反馈

  5. 布局设计：

    • 使用 GridView 实现图标网格布局
    • 实现了响应式布局，适应不同屏幕尺寸
    • 调整图标大小和间距以避免布局溢出

  6. 状态管理：

    • 使用 setState 管理组件状态
    • 维护选中图标索引

  7. OpenHarmony 适配：

    • 确保代码在 OpenHarmony 平台上正常运行
    • 考虑了平台特定的显示和交互特性

  8. 代码优化：

    • 修复了弃用的 API 使用
    • 优化了布局以避免溢出问题

通过本次开发，成功实现了 Flutter 三方库 flutter_svg 在 OpenHarmony 平台上的适配，创建了一个功能完整的 SVG 图标展示应用，包含了点击交互效果和视觉反馈。

# flutter # 鸿蒙 # 华为 # 开发语言
Logo
开源鸿蒙跨平台开发者社区

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

更多推荐

cover

Flutter 三方库 typesense 的鸿蒙化适配指南 - 打造超高性能实时搜索引擎、极致的全文检索体验、支持鸿蒙分布式搜索方案、赋能鸿蒙应用内容分发新速度

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

Flutter 三方库 wake_on_lan 的鸿蒙化适配指南 - 实现远程唤醒内网计算设备、深度集成鸿蒙分布式控制中心、打造高性能 WOL 魔法包发送工具

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

Flutter三方库 syncfusion_flutter_calendar 适配 OpenHarmony —— 实现时间线日视图

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