鸿蒙开发：推荐一个星级评分组件

前言

星级评分组件，大家并不陌生，它广泛应用于商品评价、服务反馈、内容评分等场景，系统中也为我们提供了原生Rating组件来实现，但是，在使用的时候，我们会发现，如果想要改变组件的颜色，需要使用starStyle属性，并且必须传递图片资源才能实现，如下代码所示：

.starStyle({
          backgroundUri: '/common/image1.png', //未选中状态的背景图源
          foregroundUri: '/common/image2.png',//已选中状态的前景图源
          secondaryUri: '/common/image3.png'//部分选中状态的次要图源
        })

以上的方式，考虑到了评分组件的完全自定义性，让开发者可以根据自身App的UI来定制化操作，满足了多样化的需求，然而在实际的开发中，评分组件大多数都是五角星的形式存在的，为了满足UI，还必须准备图片资源，确实有点大材小用，如果官方能够提供可以修改颜色的属性，那绝对是完美的一个组件，可是，遗憾的是，并没有提供。

为了满足只更改颜色，就可以实现的一个评分组件，索性自己使用Canvas来绘制了一个，目前不仅支持动态颜色配置，还支持边框，大小，小数，爱心等等效果实现，如下图所示：

当然了，目前只满足星级评分及以上的效果，如果你有更定制化的操作，建议直接使用系统的评分组件。

目前组件已经上传到了中心仓库，地址如下，有需要的同学可以进行使用。

https://ohpm.openharmony.cn/#/cn/detail/@abner%2Frating

目前功能

• 1、支持大小动态设置。
• 2、支持颜色动态修改。
• 3、支持数量动态修改。
• 4、支持小数步长设置。
• 5、支持爱心形状评分。
• 6、支持正方形、菱形、圆形、六边形效果。
• 7、支持点击和手势滑动评分。

快速使用

方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

建议：在使用的模块路径下进行执行命令。

ohpm install @abner/rating

方式二：在需要的模块中的oh-package.json5中设置三方包依赖，配置示例如下：

"dependencies": { "@abner/rating": "^1.0.0"}

代码使用

简单使用

StarRating({
  onRatingChange: (star: number) => {
    this.starNumber = star
  }
})

设置默认数量

StarRating({
  ratingQuantity: 1
})

设置星星数量

StarRating({
  maxRating: 8
})

设置大小

StarRating({
  ratingSize: 28
})

设置颜色

StarRating({
  fillColor: Color.Red
})

设置边框

StarRating({
  fillColor: Color.Red,
  strokeColor: Color.Blue,
  strokeWidth: 1,
  ratingSize: 25
})

未选中空心

StarRating({
  emptyColor: Color.Transparent,
  strokeColor: Color.Gray,
  strokeWidth: 0.5,
  ratingSize: 25
})

设置小数

StarRating({
  ratingStep: 0.5,
  ratingSize: 25,
  onRatingChange: (star: number) => {
    this.starNumber2 = star
  }
})

正方形

StarRating({
  ratingType: RatingType.square
})

菱形

StarRating({
  ratingType: RatingType.diamond
})

六边形

StarRating({
  ratingType: RatingType.hexagon
})

圆形

StarRating({
  ratingType: RatingType.circle,
  ratingStep: 0.5,
  ratingSize: 25,
})

爱心

StarRating({
  ratingType: RatingType.love,
  fillColor: Color.Red,
  ratingSize: 25
})

属性介绍

常见属性配置如下：

|----------------|--------------------------------------------------|-----------------------------------------------------------------------|
| 属性 | 类型 | 概述 |
| maxRating | number | 最大数量 |
| ratingSize | number | 组件每个元素大小 |
| ratingSpacing | number | 组件元素之间的间距 |
| emptyColor | string / number / CanvasGradient / CanvasPattern | 未选中时的空颜色 |
| fillColor | string / number / CanvasGradient / CanvasPattern | 选中之后的填充颜色 |
| strokeColor | string / number / CanvasGradient / CanvasPattern | 组件元素边框颜色 |
| strokeWidth | number | 组件元素边框大小 |
| ratingStep | number | 星星步长 |
| ratingQuantity | number | 星星填充比例：0-1之间 |
| onRatingChange | (num: number) => void | 评级回调 |
| ratingType | RatingType | 组件类型，pentagram：五角星,hexagon：六边形,circle：圆,diamond：菱形,square：正方形,love：爱心 |
| isGesture | boolean | 是否允许手势，默认false不允许 |

相关总结

一个很简单的星级评分组件，主要解决了系统原生组件不支持更改颜色的问题，如果有定制化的操作，比如图片形式的，建议直接使用系统的Rating。