Flutter for OpenHarmony 实战：fl_char 实现雷达图
在移动开发领域，我们总是面临着选择与适配。今天，你的Flutter应用在Android和iOS上跑得正欢，明天可能就需要考虑一个新的平台：HarmonyOS（鸿蒙）。这不是一道选答题，而是很多团队正在面对的现实。Flutter的优势很明确——写一套代码，就能在两个主要平台上运行，开发体验流畅。而鸿蒙代表的是下一个时代的互联生态，它不仅仅是手机系统，更着眼于未来全场景的体验。
·
欢迎加入开源鸿蒙跨平台社区： 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 实时预览 效果展示
运行到鸿蒙虚拟设备中效果展示
目录
功能代码实现
RadarChartComponent 组件开发实现
核心功能
RadarChartComponent 是一个基于 fl_chart 库实现的能力雷达图组件，包含以下核心功能：
- 展示六个维度的能力数据：力量、速度、耐力、技巧、敏捷、智力
- 支持点击交互效果，点击雷达图会随机选择一个维度并高亮显示
- 支持展开/收起功能，展开后会显示更详细的数据信息
- 手动添加类别标签，确保雷达图的可读性
代码实现
1. 依赖导入与基础结构
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'dart:math' as math;
class RadarChartComponent extends StatefulWidget {
const RadarChartComponent({super.key});
State<RadarChartComponent> createState() => _RadarChartComponentState();
}
class _RadarChartComponentState extends State<RadarChartComponent> {
int _selectedIndex = -1;
bool _isExpanded = false;
// Sample data for radar chart
final List<String> categories = [
'力量',
'速度',
'耐力',
'技巧',
'敏捷',
'智力',
];
final List<double> data = [65, 75, 80, 70, 85, 90];
// 其他方法...
}
2. 标签位置计算方法
为了在雷达图周围显示类别标签，实现了 _getLabelOffset 方法来计算每个标签的位置：
// Calculate label offset based on index and total count
Offset _getLabelOffset(int index, int total, double height) {
double angle = (index / total) * 2 * 3.14159265359 - 3.14159265359 / 2;
double radius = (height / 2) * 0.6;
double x = radius * cos(angle);
double y = radius * sin(angle);
// Adjust for label size
if (x > 0) x += 15;
if (x < 0) x -= 30;
if (y > 0) y += 15;
if (y < 0) y -= 15;
return Offset(x, y);
}
// Helper method for cosine
double cos(double angle) {
return math.cos(angle);
}
// Helper method for sine
double sin(double angle) {
return math.sin(angle);
}
3. 主界面构建
Widget build(BuildContext context) {
return Column(
children: [
Container(
padding: const EdgeInsets.all(16),
margin: const EdgeInsets.all(16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 2,
blurRadius: 5,
offset: const Offset(0, 3),
),
],
),
child: Column(
children: [
// 标题和展开按钮
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'能力雷达图',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
IconButton(
onPressed: () {
setState(() {
_isExpanded = !_isExpanded;
// Add random selection for interaction
if (_isExpanded) {
_selectedIndex = math.Random().nextInt(categories.length);
}
});
},
icon: Icon(
_isExpanded ? Icons.expand_less : Icons.expand_more,
),
),
],
),
// 雷达图部分
const SizedBox(height: 16),
SizedBox(
height: _isExpanded ? 400 : 300,
child: Stack(
alignment: Alignment.center,
children: [
// 雷达图
RadarChart(
RadarChartData(
borderData: FlBorderData(
show: false,
),
radarTouchData: RadarTouchData(
touchCallback: (FlTouchEvent event, RadarTouchResponse? response) {
setState(() {
if (event is FlTapUpEvent) {
_selectedIndex = math.Random().nextInt(categories.length);
}
});
},
),
tickCount: 5,
ticksTextStyle: const TextStyle(
fontSize: 10,
color: Colors.grey,
),
dataSets: [
RadarDataSet(
fillColor: Colors.deepPurple.withOpacity(0.2),
borderColor: Colors.deepPurple,
borderWidth: 2,
entryRadius: 4,
dataEntries: categories.asMap().entries.map((entry) {
int index = entry.key;
return RadarEntry(
value: data[index],
);
}).toList(),
),
],
),
swapAnimationDuration: const Duration(milliseconds: 400),
),
// 手动添加类别标签
for (int i = 0; i < categories.length; i++)
Positioned(
child: Transform.translate(
offset: _getLabelOffset(i, categories.length, _isExpanded ? 400 : 300),
child: Container(
padding: const EdgeInsets.all(4),
child: Text(
categories[i],
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
),
),
],
),
),
// 高亮显示选中的数据
const SizedBox(height: 16),
if (_selectedIndex != -1)
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.deepPurple.withOpacity(0.1),
),
child: Text(
'${categories[_selectedIndex]}: ${data[_selectedIndex]}',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.deepPurple,
),
),
),
// 展开后显示详细数据
if (_isExpanded)
Column(
children: [
const SizedBox(height: 16),
const Text(
'数据详情',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 12),
Wrap(
spacing: 12,
runSpacing: 8,
children: categories.asMap().entries.map((entry) {
int index = entry.key;
String category = entry.value;
double value = data[index];
return Chip(
label: Text('$category: $value'),
backgroundColor: Colors.deepPurple.withOpacity(0.1),
labelStyle: TextStyle(
color: Colors.deepPurple,
),
);
}).toList(),
),
],
),
],
),
),
],
);
}
使用方法
在主页面中导入并使用 RadarChartComponent 组件：
import 'package:flutter/material.dart';
import 'components/radar_chart.dart';
// ...
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
backgroundColor: Colors.deepPurple,
),
body: SingleChildScrollView(
child: Center(
child: Column(
children: <Widget>[
const RadarChartComponent(),
],
),
),
),
);
}
本次开发中容易遇到的问题
1. fl_chart 版本兼容性问题
问题现象：
- 使用较新版本的 fl_chart 库时，编译报错，提示某些参数不存在
- 例如：
isVisible、backgroundColor、gridBorderColor等参数
解决方案：
- 检查 fl_chart 库的版本，确保使用兼容的版本
- 参考官方文档，使用对应版本支持的参数
- 对于不支持的参数，采用替代方案实现相同功能
2. 雷达图标签显示问题
问题现象：
- 旧版本的 fl_chart 库不支持在 RadarEntry 中设置 title 参数
- 导致雷达图无法显示类别标签
解决方案：
- 使用 Stack 和 Positioned 组件手动添加类别标签
- 实现
_getLabelOffset方法，根据角度和半径计算标签位置 - 考虑标签大小，适当调整偏移量，确保标签显示清晰
3. 触摸事件处理问题
问题现象：
- 旧版本的 fl_chart 库中，RadarTouchResponse 的属性名称与新版本不同
- 导致无法获取触摸点的索引
解决方案：
- 简化触摸事件处理逻辑
- 使用随机选择的方式模拟触摸交互效果
- 确保用户操作有反馈，提升用户体验
4. 布局适配问题
问题现象：
- 在不同尺寸的设备上，雷达图可能显示不全或布局错乱
解决方案：
- 使用 SizedBox 控制雷达图的高度
- 根据展开状态动态调整高度
- 使用 SingleChildScrollView 确保内容可以正常滚动
- 测试不同尺寸设备的显示效果
总结本次开发中用到的技术点
1. Flutter 核心技术
1.1 基础架构
- Widget 树：使用组合不同的 widget 构建 UI
- StatefulWidget 与 StatelessWidget：根据是否需要状态管理选择合适的 widget 类型
- setState()：更新状态并触发 UI 重建
1.2 布局系统
- Column：垂直布局组件
- Row：水平布局组件
- Container：容器组件，支持装饰和边距
- Stack：层叠布局组件，用于手动添加类别标签
- Positioned：定位组件，用于精确定位标签
- SingleChildScrollView：滚动组件，确保内容适配不同屏幕
1.3 交互组件
- IconButton：图标按钮，用于展开/收起功能
- Chip：标签组件，用于显示详细数据
- Text：文本组件，用于显示标题和数据
2. fl_chart 库使用
2.1 雷达图配置
- RadarChart：雷达图组件
- RadarChartData：雷达图数据配置
- RadarDataSet：雷达图数据集
- RadarEntry：雷达图数据点
- RadarTouchData：雷达图触摸事件处理
2.2 样式配置
- fillColor：填充颜色
- borderColor：边框颜色
- borderWidth：边框宽度
- entryRadius：数据点半径
- tickCount：刻度数量
- ticksTextStyle：刻度文本样式
3. 数学计算
3.1 坐标计算
- 使用三角函数计算标签位置
- 考虑角度和半径，确保标签均匀分布在雷达图周围
- 根据屏幕尺寸动态调整标签位置
4. 动画效果
4.1 过渡动画
- 使用
swapAnimationDuration配置雷达图切换动画 - 提升用户体验，使交互更加流畅
5. 鸿蒙集成技术
5.1 混合工程结构
- Flutter 层负责业务逻辑和 UI 构建
- 鸿蒙原生层负责平台特定功能和系统集成
- 确保代码在 Flutter 和鸿蒙平台上都能正常运行
5.2 跨平台适配
- 考虑不同平台的特性和限制
- 测试在鸿蒙设备上的显示效果
- 确保布局和交互在不同平台上保持一致
6. 开发工具与流程
6.1 开发环境
- Flutter SDK：提供 Flutter 开发工具和库
- DevEco Studio：鸿蒙应用开发工具
- 确保开发环境配置正确，支持跨平台开发
6.2 依赖管理
- 在 pubspec.yaml 中添加 fl_chart 依赖
- 确保依赖版本兼容，避免编译错误
7. 最佳实践
7.1 代码组织
- 将雷达图组件抽离为单独的文件
- 使用清晰的命名规范，增强代码可读性
- 合理划分代码结构，提高代码可维护性
7.2 性能优化
- 减少不必要的 widget 重建
- 合理使用 setState() 更新状态
- 优化布局结构，避免嵌套过深
7.3 用户体验
- 添加交互效果，提升用户体验
- 提供清晰的视觉反馈
- 确保界面美观、易用
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
13
0- 0
已为社区贡献15条内容
所有评论(0)