Flutter + OpenHarmony 评分组件开发实战

Flutter OpenHarmony 评分组件开发实战欢迎加入开源鸿蒙跨平台社区→ https://openharmonycrosplatform.csdn.net一、效果展示 运行效果预览在鸿蒙虚拟机上运行后的实际效果如下星星评分 大尺寸星星评分支持半星3.5星点击星星即可修改评分右侧显示评分数值3.5中等尺寸只读评分显示评论数128小尺寸紧凑评分爱心评分 红色爱心评分样式点击切换评分状态粉色自定义颜色爱心圆点评分 圆点形状的评分样式主题色圆点绿色自定义颜色圆点点赞评分 大拇指评分样式蓝色点赞图标橙色自定义颜色三种尺寸对比 小尺寸图标20px间距2px中尺寸图标28px间距4px大尺寸图标36px间距6px自定义颜色 紫色星星 紫色半透明未激活色青色爱心 青色半透明未激活色 四种评分样式图示星星评分★★★★☆ 爱心评分♥♥♥♥♡ 圆点评分●●●●○ 点赞评分 半星评分效果完整星★★★★★ 半星 ★★★½☆ 空星 ☆☆☆☆☆二、组件概述评分组件是电商、应用商店、内容平台等场景中不可或缺的交互元素。用户通过评分组件对商品、服务、内容进行评价。在 OpenHarmony 环境下开发 Flutter 应用时评分组件需要支持多种图标样式、半星评分、交互式评分等功能。三、核心功能特性✅ 四种评分样式 - 星星、爱心、圆点、点赞✅ 三种尺寸规格 - 小、中、大✅ 支持半星评分 - 精确到0.5分✅ 交互式评分 - 点击或滑动修改评分✅ 自定义颜色 - 激活色和未激活色独立配置✅ 显示评分数值 - 可选显示评分数值和评论数✅ 悬停预览 - 鼠标悬停时预览评分效果四、技术实现架构4.1 评分样式枚举enum RatingStyle { stars, // 星星 - 经典评分样式 hearts, // 爱心 - 喜爱程度 circles, // 圆点 - 简洁评分 thumbs // 点赞 - 满意度 }4.2 尺寸规格枚举enum RatingSize { small, // 小尺寸 - 紧凑布局 medium, // 中尺寸 - 默认选择 large // 大尺寸 - 强调显示 }4.3 组件属性定义class CustomRating extends StatefulWidget { final double rating; // 当前评分 final int maxRating; // 最大评分 值 final ValueChangeddouble? onRatingChanged; // 评分变化回调 final RatingStyle style; // 评分样式 final RatingSize size; // 尺寸规格 final Color? activeColor; // 激活颜色 final Color? inactiveColor; // 未激活颜色 final bool interactive; // 是否可交 互 final bool allowHalfRating; // 是否允许 半星 final String? label; // 标签文本 final int? reviewCount; // 评论数量 final bool showValue; // 是否显示 评分数值 }五、CustomRating 核心实现5.1 状态管理class _CustomRatingState extends StateCustomRating { late double _currentRating; // 当前评分 double? _hoverRating; // 悬停评分 override void initState() { super.initState(); _currentRating widget.rating; } override void didUpdateWidget(CustomRating oldWidget) { super.didUpdateWidget (oldWidget); if (oldWidget.rating ! widget. rating) { _currentRating widget. rating; } } double get _displayRating _hoverRating ?? _currentRating; }状态说明 _currentRating 实际评分值_hoverRating 鼠标悬停时的预览评分_displayRating 当前显示的评分优先悬停评分5.2 图标映射IconData _getIcon(RatingStyle style, bool isActive) { switch (style) { case RatingStyle.stars: return isActive ? Icons.star : Icons.star_border; case RatingStyle.hearts: return isActive ? Icons. favorite : Icons. favorite_border; case RatingStyle.circles: return isActive ? Icons. circle : Icons. circle_outlined; case RatingStyle.thumbs: return isActive ? Icons. thumb_up : Icons. thumb_up_outlined; } }5.3 尺寸映射double _getIconSize() { switch (widget.size) { case RatingSize.small: return 20; case RatingSize.medium: return 28; case RatingSize.large: return 36; } } double _getSpacing() { switch (widget.size) { case RatingSize.small: return 2; case RatingSize.medium: return 4; case RatingSize.large: return 6; } }5.4 评分项构建Widget _buildRatingItem(int index, Color activeColor, Color inactiveColor) { final displayRating _displayRating; final isActive index displayRating.floor(); final isHalf widget. allowHalfRating index displayRating.floor () displayRating % 1 0.5; return GestureDetector( onTap: widget.interactive ? () _handleRating ((index 1).toDouble()) : null, onHorizontalDragUpdate: widget. interactive ? (details) { final box context. findRenderObject() as RenderBox; final localPosition box.globalToLocal (details. globalPosition); final itemWidth _getIconSize() _getSpacing(); final rating (localPosition.dx / itemWidth).clamp(0.0, widget.maxRating. toDouble()); _handleRating(widget. allowHalfRating ? (rating * 2).round () / 2 : rating.round(). toDouble()); } : null, child: Stack( children: [ Icon( _getIcon(widget.style, false), size: _getIconSize(), color: inactiveColor, ), if (isActive || isHalf) ClipRect( clipper: isHalf ? _HalfClipper() : null, child: Icon( _getIcon(widget. style, true), size: _getIconSize(), color: activeColor, ), ), ], ), ).animate().scale(delay: (index * 50).ms, begin: const Offset(0.8, 0.8), end: const Offset(1, 1)); }交互方式 点击直接设置评分为点击的图标索引1水平拖动根据拖动位置计算评分半星支持通过 _HalfClipper 裁剪图标5.5 半星裁剪器class _HalfClipper extends CustomClipperRect { override Rect getClip(Size size) { return Rect.fromLTWH(0, 0, size. width / 2, size.height); } override bool shouldReclip(covariant CustomClipperRect oldClipper) false; }半星原理 使用 ClipRect 裁剪图标只显示左半部分实现半星视觉效果5.6 悬停处理void _handleHover(double? rating) { if (!widget.interactive) return; setState(() { _hoverRating rating; }); } // 在 MouseRegion 中使用 MouseRegion( onEnter: widget.interactive ? (_) _handleHover((index 1).toDouble()) : null, onExit: widget.interactive ? (_) _handleHover(null) : null, child: // ... 评分图标 )5.7 默认颜色映射Color _getDefaultActiveColor() { switch (widget.style) { case RatingStyle.stars: return Colors.amber; // 星星默认金色 case RatingStyle.hearts: return Colors.red; // 爱心默认红色 case RatingStyle.circles: return Theme.of(context). colorScheme.primary; // 圆点默 认主题色 case RatingStyle.thumbs: return Colors.blue; // 点赞默认蓝色 } }六、使用示例集锦示例1基础星星评分CustomRating( rating: 3.5, style: RatingStyle.stars, size: RatingSize.large, allowHalfRating: true, showValue: true, onRatingChanged: (rating) { print(评分: $rating); }, )示例2只读评分显示CustomRating( rating: 4.5, style: RatingStyle.stars, size: RatingSize.medium, interactive: false, reviewCount: 128, )示例3爱心评分CustomRating( rating: 4.0, style: RatingStyle.hearts, size: RatingSize.large, activeColor: Colors.pink, onRatingChanged: (rating) { print(喜爱程度: $rating); }, )示例4圆点评分CustomRating( rating: 3.0, style: RatingStyle.circles, size: RatingSize.medium, activeColor: Colors.green, interactive: false, )示例5点赞评分CustomRating( rating: 5.0, style: RatingStyle.thumbs, size: RatingSize.medium, activeColor: Colors.orange, interactive: false, )示例6自定义颜色CustomRating( rating: 4.0, style: RatingStyle.stars, activeColor: Colors.purple, inactiveColor: Colors.purple. withOpacity(0.2), interactive: false, )七、性能优化策略7.1 渲染优化条件渲染 使用 if 语句避免不必要的WidgetStack布局 激活图标叠加在未激活图标上ClipRect裁剪 半星效果使用裁剪而非重绘7.2 动画优化延迟动画 delay: (index * 50).ms 实现依次入场轻量动画 仅使用缩放效果7.3 状态优化didUpdateWidget 监听外部rating变化计算属性 _displayRating 实时计算显示评分八、常见问题解答Q1: 如何禁用评分交互设置 interactive: false CustomRating(rating: 4.0, interactive: false)Q2: 如何启用半星评分设置 allowHalfRating: true CustomRating(rating: 3.5, allowHalfRating: true)Q3: 如何显示评论数量设置 reviewCount 参数CustomRating(rating: 4.5, reviewCount: 128)Q4: 如何自定义评分颜色设置 activeColor 和 inactiveColor CustomRating( rating: 4.0, activeColor: Colors.purple, inactiveColor: Colors.purple. withOpacity(0.2), )Q5: 如何获取用户评分使用 onRatingChanged 回调CustomRating( rating: 3.0, onRatingChanged: (rating) { print(用户评分: $rating); }, )虚拟机运行九、总结本文详细介绍了如何在 Flutter OpenHarmony 环境中开发一个功能完善的评分组件。该组件具备以下技术亮点 丰富的视觉样式 - 四种图标样式适配不同场景 灵活的尺寸系统 - 三种尺寸规格满足布局需求⚡ 流畅的交互体验 - 点击、滑动、悬停多种交互方式 高度可定制 - 颜色、尺寸、交互全面可控实际应用场景 商品评分展示应用商店评分内容质量评价服务满意度调查用户喜好程度