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 实时预览 效果展示
运行到鸿蒙虚拟设备中效果展示
目录
功能代码实现
评分组件设计与实现
组件结构设计
评分组件是一个通用的UI组件，用于用户对内容进行评分或显示已有评分。在本次开发中，我们将评分组件抽离成单独的文件，便于复用和维护。组件设计考虑了以下核心功能：
- 支持交互式评分（用户可点击或拖拽修改评分）
- 支持非交互式评分（仅显示评分结果）
- 支持半星显示
- 可自定义评分数量、大小、颜色和初始评分值
组件代码实现
评分组件的完整实现如下：
import 'package:flutter/material.dart';
class RatingComponent extends StatefulWidget {
final int maxRating;
final double size;
final Color unselectedColor;
final Color selectedColor;
final double initialRating;
final bool isInteractive;
const RatingComponent({
super.key,
this.maxRating = 5,
this.size = 32.0,
this.unselectedColor = Colors.grey,
this.selectedColor = Colors.amber,
this.initialRating = 0.0,
this.isInteractive = true,
});
State<RatingComponent> createState() => _RatingComponentState();
}
class _RatingComponentState extends State<RatingComponent> {
late double _currentRating;
void initState() {
super.initState();
_currentRating = widget.initialRating;
}
void _updateRating(double rating) {
if (widget.isInteractive) {
setState(() {
_currentRating = rating;
});
}
}
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: List.generate(widget.maxRating, (index) {
final rating = index + 1.0;
final isFilled = rating <= _currentRating;
final isHalfFilled =
rating - 0.5 <= _currentRating && rating > _currentRating;
return GestureDetector(
onTap: widget.isInteractive ? () => _updateRating(rating) : null,
onHorizontalDragUpdate: widget.isInteractive
? (details) {
final box = context.findRenderObject() as RenderBox;
final position = box.globalToLocal(details.globalPosition);
final rating = (position.dx /
(widget.size * widget.maxRating) *
widget.maxRating)
.clamp(0.0, widget.maxRating) as double;
_updateRating(rating);
}
: null,
child: Container(
width: widget.size,
height: widget.size,
child: Stack(
children: [
Icon(
Icons.star_border,
size: widget.size,
color: widget.unselectedColor,
),
if (isFilled)
Icon(
Icons.star,
size: widget.size,
color: widget.selectedColor,
),
if (isHalfFilled)
ClipRect(
clipper: _HalfStarClipper(),
child: Icon(
Icons.star,
size: widget.size,
color: widget.selectedColor,
),
),
],
),
),
);
}),
);
}
}
class _HalfStarClipper extends CustomClipper<Rect> {
Rect getClip(Size size) {
return Rect.fromLTRB(0, 0, size.width / 2, size.height);
}
bool shouldReclip(covariant CustomClipper<Rect> oldClipper) {
return false;
}
}
核心实现解析
-
组件参数设计
评分组件提供了以下可配置参数：
maxRating：最大评分数量，默认值为5size：评分图标的大小，默认值为32.0unselectedColor：未选中星星的颜色，默认值为灰色selectedColor：选中星星的颜色，默认值为琥珀色initialRating：初始评分值，默认值为0.0isInteractive：是否可交互，默认值为true
-
状态管理
使用
_currentRating变量存储当前评分值，在initState方法中初始化，在_updateRating方法中更新。 -
交互实现
- 点击交互：通过
GestureDetector的onTap回调实现，点击星星时更新评分值 - 拖拽交互：通过
onHorizontalDragUpdate回调实现，根据拖拽位置计算评分值
- 点击交互：通过
-
星星显示逻辑
- 完全填充的星星：当星星索引+1小于等于当前评分值时
- 半填充的星星：当星星索引+1-0.5小于等于当前评分值且星星索引+1大于当前评分值时
- 未填充的星星：其他情况
-
半星实现
使用自定义的
_HalfStarClipper裁剪器，只显示星星的左半部分，实现半星效果。
组件使用方法
在首页中，我们直接使用了评分组件，展示了两种不同的使用场景：
交互式评分组件
RatingComponent(
maxRating: 5,
size: 40,
initialRating: 3.5,
isInteractive: true,
),
非交互式评分组件
RatingComponent(
maxRating: 5,
size: 32,
initialRating: 4.0,
isInteractive: false,
),
开发注意事项
-
类型转换
在计算拖拽评分值时，
clamp方法返回的是num类型，需要显式转换为double类型，否则会出现类型错误。 -
布局考虑
评分组件使用
Row和MainAxisSize.min，确保组件只占据必要的空间，便于在不同布局中使用。 -
性能优化
使用
const构造函数和shouldReclip返回false，减少不必要的重建和重绘，提高性能。 -
用户体验
同时支持点击和拖拽交互，提供更流畅的用户体验。
本次开发中容易遇到的问题
1. 类型错误问题
问题描述
在实现拖拽评分功能时，出现了类型错误：The argument type 'num' can't be assigned to the parameter type 'double'。
原因分析
clamp方法返回的是num类型，而_updateRating方法需要double类型参数，导致类型不匹配。
解决方案
使用显式类型转换，将clamp方法的返回值转换为double类型：
final rating = (position.dx / (widget.size * widget.maxRating) * widget.maxRating).clamp(0.0, widget.maxRating) as double;
2. 组件抽离问题
问题描述
在开发过程中，如果不抽离组件，直接在首页实现评分功能，会导致代码冗余和可维护性差。
原因分析
评分功能可能在多个地方使用，如果每次都重复实现，会增加代码量和维护成本。
解决方案
将评分功能抽离成单独的组件文件，通过参数配置实现不同场景的需求，提高代码复用性和可维护性。
3. 半星显示问题
问题描述
实现半星显示时，如何只显示星星的一半。
原因分析
Flutter默认的星星图标是完整的，需要通过裁剪实现半星效果。
解决方案
使用自定义的CustomClipper裁剪器，只显示星星的左半部分：
class _HalfStarClipper extends CustomClipper<Rect> {
Rect getClip(Size size) {
return Rect.fromLTRB(0, 0, size.width / 2, size.height);
}
bool shouldReclip(covariant CustomClipper<Rect> oldClipper) {
return false;
}
}
4. 交互体验问题
问题描述
只实现点击交互，用户体验不够流畅。
原因分析
用户可能希望通过拖拽快速调整评分，而不仅仅是点击。
解决方案
同时实现点击和拖拽交互，通过onHorizontalDragUpdate回调计算拖拽位置对应的评分值。
总结本次开发中用到的技术点
1. 组件化开发
- 抽离组件：将评分功能抽离成单独的
RatingComponent组件，提高代码复用性和可维护性 - 参数化设计：通过参数配置实现不同场景的需求，增强组件的灵活性
2. 状态管理
- StatefulWidget：使用有状态组件管理评分值的变化
- setState：通过
setState方法更新状态，触发UI重建
3. 交互实现
- GestureDetector：使用手势检测器实现点击和拖拽交互
- 拖拽计算：通过
onHorizontalDragUpdate回调和RenderBox计算拖拽位置对应的评分值
4. UI布局与绘制
- Row布局：使用水平布局排列星星图标
- Stack堆叠：使用堆叠布局实现星星的叠加显示
- CustomClipper：使用自定义裁剪器实现半星效果
5. 类型处理
- 类型转换：在需要时进行显式类型转换，避免类型错误
6. 性能优化
- const构造函数：使用
const关键字创建不变的Widget，减少重建 - shouldReclip：在自定义裁剪器中返回
false，减少不必要的重绘
7. Flutter for OpenHarmony适配
- 跨平台兼容性：确保组件在OpenHarmony平台上正常运行
- 平台特性：考虑OpenHarmony平台的特性，确保组件的适配性
通过本次开发，我们实现了一个功能完整、交互友好的评分组件，并掌握了Flutter组件化开发的核心技术。该组件不仅可以在OpenHarmony平台上使用，也可以在Android和iOS平台上正常运行，体现了Flutter跨平台开发的优势。
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
21
0- 0
已为社区贡献13条内容
所有评论(0)