Flutter for OpenHarmony 实战：实现一个散点图 # 前言：跨生态开发的新机遇
·
欢迎加入开源鸿蒙跨平台社区： 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 实时预览 效果展示
运行到鸿蒙虚拟设备中效果展示
目录
功能代码实现
散点图数据模型
散点图数据模型是整个散点图功能的基础，用于存储和管理散点图的数据集信息。
实现代码
/// 散点图数据模型
class ScatterChartDataModel {
final String title; // 数据集标题
final List<ScatterSpot> spots; // 散点列表
final Color color; // 散点颜色
final double radius; // 散点半径
ScatterChartDataModel({
required this.title,
required this.spots,
required this.color,
required this.radius,
});
}
设计思路
- title: 用于标识不同的数据集，在图例和交互提示中使用
- spots: 存储具体的散点数据，每个散点由x和y坐标组成
- color: 定义数据集的颜色，用于区分不同数据集
- radius: 定义散点的大小，影响视觉效果
使用方法
在应用中初始化数据模型：
ScatterChartDataModel(
title: '数据集1',
spots: [
ScatterSpot(1.0, 3.0),
ScatterSpot(2.0, 5.0),
// 更多散点...
],
color: Colors.blue,
radius: 6,
),
自定义散点图组件
CustomScatterChart是一个组合组件，负责整合散点图的标题、图表区域和图例，提供完整的散点图展示功能。
实现代码
/// 自定义散点图组件
class CustomScatterChart extends StatelessWidget {
final String title; // 图表标题
final List<ScatterChartDataModel> data; // 数据集列表
final Function(ScatterSpot, ScatterChartDataModel)? onPointTap; // 点点击回调
const CustomScatterChart({
super.key,
required this.title,
required this.data,
this.onPointTap,
});
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 标题
Text(
title,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
),
const SizedBox(height: 16),
// 图表区域
Expanded(
child: ScatterChartWidget(
data: data,
onPointTap: onPointTap,
),
),
const SizedBox(height: 16),
// 图例
Container(
height: 50,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: data.length,
itemBuilder: (context, index) {
final dataset = data[index];
return Container(
margin: const EdgeInsets.only(right: 16),
child: Row(
children: [
Container(
width: 12,
height: 12,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: dataset.color,
),
),
const SizedBox(width: 6),
Text(dataset.title),
],
),
);
},
),
),
],
),
);
}
}
设计思路
- 标题部分: 显示图表的主标题，使用粗体字体增强视觉效果
- 图表区域: 使用Expanded包裹ScatterChartWidget，确保图表能够自适应容器高度
- 图例部分: 使用水平ListView实现图例，每个图例项包含颜色指示器和数据集标题
开发中需要注意的点
- 布局结构: 使用Column和Expanded合理布局，确保图表区域能够占满可用空间
- 图例滚动: 当数据集较多时，使用水平ListView确保图例可以滚动查看
- 间距设置: 通过SizedBox和margin设置合理的间距，提升视觉效果
散点图核心组件
ScatterChartWidget是散点图的核心组件，负责处理fl_chart的配置和交互逻辑，是与fl_chart库直接交互的部分。
实现代码
/// 散点图核心组件
class ScatterChartWidget extends StatefulWidget {
final List<ScatterChartDataModel> data;
final Function(ScatterSpot, ScatterChartDataModel)? onPointTap;
const ScatterChartWidget({
super.key,
required this.data,
this.onPointTap,
});
_ScatterChartWidgetState createState() => _ScatterChartWidgetState();
}
class _ScatterChartWidgetState extends State<ScatterChartWidget> {
List<ScatterSpot> _allSpots = [];
void initState() {
super.initState();
_initializeSpots();
}
void _initializeSpots() {
_allSpots = [];
for (var dataset in widget.data) {
_allSpots.addAll(dataset.spots);
}
}
void didUpdateWidget(covariant ScatterChartWidget oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.data != widget.data) {
_initializeSpots();
}
}
Widget build(BuildContext context) {
return ScatterChart(
ScatterChartData(
scatterSpots: _allSpots,
gridData: FlGridData(
show: true,
drawHorizontalLine: true,
drawVerticalLine: true,
horizontalInterval: 1,
verticalInterval: 1,
getDrawingHorizontalLine: (value) {
return FlLine(
color: Colors.grey.withAlpha(100),
strokeWidth: 1,
);
},
getDrawingVerticalLine: (value) {
return FlLine(
color: Colors.grey.withAlpha(100),
strokeWidth: 1,
);
},
),
borderData: FlBorderData(
show: true,
border: Border.all(
color: Colors.grey.withAlpha(200),
width: 1,
),
),
titlesData: FlTitlesData(
show: true,
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
interval: 1,
reservedSize: 30,
),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
interval: 1,
reservedSize: 40,
),
),
topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
rightTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
),
minX: 0,
maxX: 10,
minY: 0,
maxY: 10,
scatterTouchData: ScatterTouchData(
enabled: true,
handleBuiltInTouches: true,
touchTooltipData: ScatterTouchTooltipData(
getTooltipItems: null,
),
touchCallback: (FlTouchEvent event, ScatterTouchResponse? response) {
if (event is PointerDownEvent && response != null) {
final touchedSpot = response.touchedSpot;
if (touchedSpot != null) {
// 找到对应的数据集
for (var dataset in widget.data) {
// 检查是否有匹配的散点
for (var spot in dataset.spots) {
if (spot.x == touchedSpot.spot.x && spot.y == touchedSpot.spot.y) {
widget.onPointTap?.call(spot, dataset);
break;
}
}
}
}
}
},
),
),
);
}
}
设计思路
- 数据处理: 在初始化和数据更新时，将所有数据集的散点合并到一个列表中，便于fl_chart处理
- 图表配置: 配置网格线、边框、坐标轴标题等视觉元素
- 触摸交互: 实现散点的点击交互，通过touchCallback处理点击事件并找到对应的数据集
开发中需要注意的点
- 数据同步: 在didUpdateWidget中处理数据更新，确保图表能够响应数据变化
- 坐标范围: 根据实际数据设置合适的minX、maxX、minY、maxY，确保散点能够正确显示
- 触摸交互: 处理触摸事件时，需要从响应中获取touchedSpot，并通过坐标匹配找到对应的数据集
- 性能优化: 当数据集较大时，需要考虑数据处理和渲染的性能
应用入口实现
应用入口main.dart负责初始化应用并配置散点图数据，是整个应用的起点。
实现代码
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:aa/components/scatter_chart.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
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;
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late List<ScatterChartDataModel> _scatterData;
void initState() {
super.initState();
_initScatterData();
}
void _initScatterData() {
// 生成散点图数据
_scatterData = [
ScatterChartDataModel(
title: '数据集1',
spots: [
ScatterSpot(1.0, 3.0),
ScatterSpot(2.0, 5.0),
// 更多散点...
],
color: Colors.blue,
radius: 6,
),
// 更多数据集...
];
}
void _onScatterPointClick(ScatterSpot spot, ScatterChartDataModel dataset) {
// 处理散点点击事件
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('点击了点: 坐标 (${spot.x}, ${spot.y}) 来自 ${dataset.title}'),
duration: const Duration(seconds: 2),
),
);
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
const Text(
'散点图展示',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 16),
Expanded(
child: CustomScatterChart(
data: _scatterData,
title: 'Flutter for OpenHarmony 散点图',
onPointTap: _onScatterPointClick,
),
),
],
),
),
);
}
}
设计思路
- 应用初始化: 通过runApp启动应用，配置主题和首页
- 数据初始化: 在MyHomePage的initState中初始化散点图数据
- 交互处理: 实现_onScatterPointClick方法处理散点点击事件，显示提示信息
- 布局结构: 使用Scaffold、Column和Expanded构建页面布局
开发中需要注意的点
- 数据初始化: 在initState中初始化数据，避免在build方法中重复创建数据
- 状态管理: 使用late关键字延迟初始化数据，确保数据在使用前已初始化
- 错误处理: 处理可能的空指针和异常情况
本次开发中容易遇到的问题
1. fl_chart库版本兼容性问题
问题描述
在开发过程中，使用不同版本的fl_chart库可能会导致API调用错误，例如方法参数不匹配、属性不存在等问题。
解决方案
- 确定使用的fl_chart版本，参考对应版本的官方文档
- 注意API变更，特别是在处理触摸事件和工具提示时的方法签名
- 对于版本差异较大的情况，需要根据当前版本的API调整代码实现
2. 散点图数据处理问题
问题描述
在处理多个数据集时，如何正确合并和管理散点数据，确保每个散点都能正确显示和交互。
解决方案
- 将所有数据集的散点合并到一个列表中，便于fl_chart处理
- 在触摸交互时，通过坐标匹配找到对应的数据集
- 确保数据更新时，图表能够正确响应变化
3. 触摸交互处理问题
问题描述
在实现散点点击交互时，可能会遇到触摸事件处理不正确、无法找到对应数据集等问题。
解决方案
- 正确处理FlTouchEvent事件，区分不同类型的触摸事件
- 从ScatterTouchResponse中获取touchedSpot，注意空值检查
- 通过坐标匹配算法找到对应的数据集，确保点击事件能够正确回调
4. 布局适配问题
问题描述
在不同屏幕尺寸的设备上，散点图可能会出现布局问题，例如图例显示不全、图表区域过小等。
解决方案
- 使用Expanded和Flexible等布局组件，确保图表能够自适应容器大小
- 对于图例，使用水平ListView确保在数据集较多时能够滚动查看
- 设置合理的边距和间距，提升在不同设备上的显示效果
5. 性能优化问题
问题描述
当数据集较大时，散点图的渲染和交互可能会出现性能问题，例如卡顿、响应延迟等。
解决方案
- 优化数据处理逻辑，避免在build方法中重复处理数据
- 考虑使用缓存机制，减少重复计算
- 对于非常大的数据集，可能需要考虑数据抽样或分页加载
总结本次开发中用到的技术点
1. Flutter基础技术
- 组件化开发: 将散点图拆分为多个组件，提高代码复用性和可维护性
- 状态管理: 使用StatefulWidget和StatelessWidget管理组件状态
- 布局系统: 使用Container、Column、Expanded等布局组件构建界面
- 事件处理: 处理触摸事件和用户交互
2. 第三方库使用
- fl_chart: 使用fl_chart库实现散点图的核心功能，包括数据渲染、网格线、坐标轴等
- Material Design: 使用Flutter内置的Material Design组件，如Scaffold、AppBar、SnackBar等
3. 数据模型设计
- 数据结构: 设计ScatterChartDataModel数据模型，包含标题、散点列表、颜色和半径
- 数据初始化: 在应用启动时初始化模拟数据，用于展示散点图
- 数据处理: 合并多个数据集的散点，便于图表渲染
4. 交互设计
- 触摸交互: 实现散点的点击事件处理，显示详细信息
- 工具提示: 配置散点图的工具提示，显示散点的坐标信息
- 图例交互: 实现图例的显示和滚动，提升用户体验
5. 跨平台适配
- Flutter跨平台: 利用Flutter的跨平台特性，确保代码能够在Android、iOS和鸿蒙平台上运行
- 平台差异: 考虑不同平台的显示差异，确保布局和交互在各平台上都能正常工作
6. 代码优化
- 性能优化: 优化数据处理和渲染逻辑，提升图表性能
- 代码结构: 合理组织代码结构，提高代码可读性和可维护性
- 错误处理: 添加适当的空值检查和异常处理，提高应用稳定性
通过本次开发，我们成功实现了一个功能完整的散点图应用，展示了如何使用Flutter和fl_chart库构建数据可视化组件，并确保其能够在鸿蒙平台上正常运行。同时，我们也总结了开发过程中遇到的问题和解决方案，为后续的跨平台开发提供了参考。
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
15
0- 0
已为社区贡献1条内容
所有评论(0)