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

引言

在数据可视化领域，气泡图是一种强大的图表类型，它通过在二维平面上绘制不同大小的气泡来展示三个变量之间的关系。气泡图不仅能够展示数据点的分布情况，还能通过气泡的大小直观地表达第三个维度的数据信息，是数据分析和探索的有力工具。

Flutter 3.6.2 作为跨平台开发框架，为我们提供了统一代码库覆盖多平台的能力。而 OpenHarmony 作为新兴的分布式操作系统，正在快速发展并吸引越来越多开发者的关注。如何在 OpenHarmony 平台上实现高质量的气泡图功能，成为了我们需要解决的重要问题。

在本次开发中，我选择了使用 Flutter 内置的 Widget 来实现气泡图，这样可以避免依赖第三方库可能带来的兼容性问题，确保在 OpenHarmony 平台上的稳定运行。

项目架构与技术选型

项目目录结构

fluuter_openHarmony/
├── lib/                          # Flutter 业务代码
│   ├── main.dart                 # 应用入口，包含气泡图组件实现
├── pubspec.yaml                  # Flutter 依赖配置
├── ohos/                         # OpenHarmony 原生层
│   ├── entry/                    # 主模块
│   │   └── src/main/
│   │       ├── ets/              # ArkTS 代码
│   │       │   ├── MainAbility/  # 主 Ability 实现
│   │       │   └── pages/        # 页面实现
│   │       ├── resources/        # 资源文件
│   │       └── config.json       # 应用配置
│   ├── build-profile.json5      # 构建配置
│   └── oh-package.json5         # 依赖管理
└── 文档.md                       # 项目文档

展示效果图片

flutter 实时预览 效果展示

运行到鸿蒙虚拟设备中效果展示

技术选型

核心框架：Flutter 3.6.2

• 选择理由：跨平台能力强，性能优异，热重载提高开发效率，生态系统成熟
• 技术优势：单一代码库覆盖多平台，原生性能体验，丰富的组件库

实现方式：自定义 Widget + Canvas 绘制

• 选择理由：避免依赖第三方库的兼容性问题，确保在 OpenHarmony 平台上的稳定运行
• 技术优势：完全控制绘制过程，高度可定制，性能优异

平台适配：ohos_flutter 插件

• 选择理由：官方推荐的 Flutter 与 OpenHarmony 桥接方案，提供了稳定的跨平台能力
• 技术优势：无缝集成，性能损耗低，开发体验一致

气泡图功能设计与实现

功能需求分析

1. 数据可视化：能够清晰展示三个变量之间的关系（国家、GDP、人口）
2. 交互式数据探索：支持用户点击气泡查看详细信息
3. 专业视觉效果：图表布局合理，视觉效果符合现代应用设计标准
4. 响应式设计：在不同屏幕尺寸下都能正常显示，保持良好的视觉比例
5. 高性能渲染：确保图表渲染流畅，无卡顿现象

核心实现方案

1. 数据结构设计

class BubbleData {
  final String country;    // 国家名称
  final double gdp;        // GDP（万亿美元）
  final double population; // 人口（十亿）
  final double lifeExpectancy; // 预期寿命（岁）

  BubbleData(this.country, this.gdp, this.population, this.lifeExpectancy);
}

2. 气泡图绘制实现

class CustomBubbleChart extends StatelessWidget {
  final List<BubbleData> data;

  const CustomBubbleChart({super.key, required this.data});

  @override
  Widget build(BuildContext context) {
    // 计算数据范围
    double maxGdp = data.map((item) => item.gdp).reduce((a, b) => a > b ? a : b);
    double maxPopulation = data.map((item) => item.population).reduce((a, b) => a > b ? a : b);

    return Container(
      color: Colors.white,
      child: Stack(
        children: [
          // 绘制坐标轴
          CustomPaint(
            painter: AxisPainter(),
            size: Size.infinite,
          ),
          // 绘制气泡
          ...data.map((item) {
            // 计算气泡位置和大小
            double x = (data.indexOf(item) + 0.5) / data.length;
            double y = 1.0 - (item.gdp / (maxGdp * 1.1)); // 1.1 是为了留一些顶部空间
            double size = (item.population / maxPopulation) * 100 + 20; // 最小20，最大120

            return Positioned(
              left: x * MediaQuery.of(context).size.width * 0.8 + 60, // 60是左侧边距
              top: y * MediaQuery.of(context).size.height * 0.7 + 40, // 40是顶部边距
              child: GestureDetector(
                onTap: () {
                  // 显示气泡信息
                  showDialog(
                    context: context,
                    builder: (context) => AlertDialog(
                      title: Text(item.country),
                      content: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('GDP: ${item.gdp} 万亿美元'),
                          Text('人口: ${item.population} 十亿'),
                          Text('预期寿命: ${item.lifeExpectancy} 岁'),
                        ],
                      ),
                      actions: [
                        TextButton(
                          onPressed: () => Navigator.pop(context),
                          child: const Text('确定'),
                        ),
                      ],
                    ),
                  );
                },
                child: Column(
                  children: [
                    Container(
                      width: size,
                      height: size,
                      decoration: BoxDecoration(
                        color: Colors.blue.withOpacity(0.6),
                        shape: BoxShape.circle,
                      ),
                      child: Center(
                        child: Text(
                          item.country.substring(0, 2),
                          style: const TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                    Text(
                      item.country,
                      style: const TextStyle(fontSize: 12),
                    ),
                  ],
                ),
              ),
            );
          }),
        ],
      ),
    );
  }
}

3. 坐标轴绘制实现

class AxisPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.black..strokeWidth = 2;

    // 绘制X轴
    canvas.drawLine(
      const Offset(60, 40),
      Offset(size.width - 20, 40),
      paint,
    );

    // 绘制Y轴
    canvas.drawLine(
      const Offset(60, 40),
      Offset(60, size.height - 20),
      paint,
    );

    // 绘制X轴标签
    const xLabel = '国家';
    final xLabelPainter = TextPainter(
      text: TextSpan(
        text: xLabel,
        style: const TextStyle(color: Colors.black, fontSize: 14),
      ),
      textDirection: TextDirection.ltr,
    )..layout();
    xLabelPainter.paint(
      canvas,
      Offset(size.width / 2 - xLabelPainter.width / 2, size.height - 10),
    );

    // 绘制Y轴标签
    const yLabel = 'GDP (万亿美元)';
    final yLabelPainter = TextPainter(
      text: TextSpan(
        text: yLabel,
        style: const TextStyle(color: Colors.black, fontSize: 14),
      ),
      textDirection: TextDirection.ltr,
    )..layout();
    canvas.save();
    canvas.translate(20, size.height / 2 + yLabelPainter.height / 2);
    canvas.rotate(-3.14159 / 2);
    yLabelPainter.paint(canvas, Offset.zero);
    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

交互体验优化

1. 点击交互：实现了气泡点击事件，点击后显示详细信息对话框
2. 视觉反馈：气泡使用半透明蓝色，点击时有对话框弹出，提供清晰的视觉反馈
3. 响应式布局：使用 MediaQuery 动态计算气泡位置，确保在不同屏幕尺寸下的正确显示
4. 数据标签：每个气泡下方显示国家名称，提高数据可读性

OpenHarmony 平台适配实践

适配策略

1. 渲染层适配：使用 Flutter 内置的 Canvas API 进行绘制，确保在 OpenHarmony 平台上的兼容性
2. 性能优化：
   • 使用 CustomPainter 进行高效绘制
   • 避免不必要的重绘操作
   • 合理管理内存使用
3. 交互适配：
   • 使用 Flutter 标准的 GestureDetector 处理触摸事件
   • 确保交互操作在 OpenHarmony 设备上表现一致
4. 布局适配：
   • 使用 MediaQuery 动态调整布局
   • 确保在不同屏幕尺寸下的正确显示

适配效果验证

通过在 OpenHarmony 虚拟设备和真实设备上的测试，验证了气泡图功能的完整可用性：

• 图表渲染：图表能够正确渲染，无显示异常，视觉效果与其他平台一致
• 交互操作：点击交互流畅，响应及时，反馈明确
• 布局适配：在不同屏幕尺寸下都能正常显示，保持良好的视觉比例
• 性能表现：渲染流畅，无明显卡顿，内存使用合理
• 稳定性：长时间运行无崩溃，资源使用稳定

开发经验与最佳实践

自定义图表实现最佳实践

1. 数据结构设计：

   • 设计清晰、简洁的数据结构，包含所有需要展示的数据字段
   • 确保数据结构的可扩展性，便于后续功能扩展

2. 绘制优化：

   • 使用 CustomPainter 进行高效绘制
   • 合理使用 Canvas API，避免不必要的绘制操作
   • 实现 shouldRepaint 方法，减少不必要的重绘

3. 交互设计：

   • 提供直观的触摸交互，支持点击查看详情
   • 添加适当的反馈机制，增强用户信心
   • 确保交互操作的响应速度和流畅度

4. 响应式布局：

   • 使用 MediaQuery 动态调整布局
   • 确保在不同屏幕尺寸下的正确显示
   • 合理设置边距和间距，确保视觉效果良好

5. 性能优化：

   • 避免在绘制过程中进行复杂计算
   • 合理使用缓存机制，减少重复计算
   • 确保在低端设备上也能保持良好的性能

跨平台开发经验

1. 平台差异处理：

   • 识别并处理不同平台的渲染差异
   • 针对平台特定的功能，使用条件编译或适配器模式
   • 建立平台测试流程，确保跨平台一致性

2. 性能优化：

   • 了解不同平台的性能特点，针对性地进行优化
   • 合理使用平台特定的优化 API
   • 监控不同平台的性能表现，持续改进

3. 资源管理：

   • 了解不同平台的资源限制和管理机制
   • 优化资源加载和释放策略
   • 确保在资源受限的平台上也能正常运行

总结

通过本次开发，我成功实现了一个功能完整、交互友好的气泡图组件，并确保其在 OpenHarmony 平台上的稳定运行。项目采用了自定义 Widget + Canvas 绘制的方式，避免了依赖第三方库可能带来的兼容性问题。

本次实现的气泡图功能包括：

• 数据可视化，展示各国 GDP、人口与预期寿命的关系
• 支持点击交互，查看详细数据信息
• 响应式布局设计，适配不同屏幕尺寸
• 美观的视觉效果，包括半透明气泡和清晰的坐标轴
• 良好的性能表现，确保在各种设备上都能流畅运行

在开发过程中，我遇到了一些挑战，如如何计算气泡的位置和大小，如何实现响应式布局等。通过合理的实现和配置，我成功解决了这些挑战，创建了一个功能完整的气泡图组件。

这种跨平台的开发方式，不仅提高了开发效率，也为 OpenHarmony 生态的丰富做出了贡献。未来，我将继续探索更多图表类型的实现，以及进一步优化在 OpenHarmony 平台上的性能和用户体验，为开发者提供更加完善的图表解决方案。

通过本次实践，我积累了宝贵的经验，为后续的 Flutter + OpenHarmony 开发奠定了基础。我相信，随着 OpenHarmony 生态的不断发展，Flutter 开发者将有更多机会参与到这个新兴平台的建设中，共同推动移动应用开发的进步。