# Rating组件自定义图片资源

#### 问题现象

使用Rating组件实现自定义评分样式时，获取不到自定义图片资源文件。

#### 背景知识

*   Rating是选择评分组件，组件中的starStyle属性可以设置评分的样式。通过StarStyleOptions对象设置对应的评分图片，可以实现自定义评分样式。
*   评分的样式支持加载本地图片和网络图片，暂不支持PixelMap类型。从API version 20开始，StarStyleOptions中的属性支持设置Resource资源。

#### 解决方案

有如下方式可以实现自定义Rating组件评分的图片资源：

*   方案一：通过Resource资源设置评分的样式（需要API20及以上），可以参考通过Resource资源设置评分的样式。
*   方案二：通过string格式设置评分的样式，可用于加载网络图片和本地图片，加载网络图片需要配置网络权限。加载本地图片需要在src/main/ets目录下面新建一个文件夹（和pages目录同级），将图片放在文件夹中，并在当前模块下build-profile.json5文件中设置copyCodeResource参数中enable为true。

示例代码如下：

```
// 方案二：通过string的方式访问项目资源
@Entry
@Component
struct RatingExample1 {
  @State rating: number = 3.5;

  build() {
    Column() {
      Rating({ rating: this.rating, indicator: false })
        .stars(5)
        .stepSize(0.5)
        .starStyle({
          // common目录与pages同级，文件名根据实际情况
          backgroundUri: 'common/star1.png',
          foregroundUri: 'common/star2.png',
          secondaryUri: 'common/star3.png'
        })
        .margin({ top: 24 })
        .onChange((value: number) => {
          this.rating = value;
        });
      Text(`current score is ${this.rating}`)
        .fontSize(16)
        .fontColor('#99182431')
        .margin({ top: 16 });
    }.width('100%').height('100%');
  }
}
```

build-profile.json5文件中copyCodeResource的字段配置如下：

```
"copyCodeResource": {
  "enable": true
}
```

效果图如下：

#### 常见FAQ

Q：在entry模块跳转到HSP模块时，HSP模块中Rating组件通过starStyle属性设置的评分样式显示空白，如何解决？

A：在API version 20版本之前，Rating组件的starStyle属性存在一些规格限制：不支持使用PixelMap类型或Resource资源。在HSP模块中，这种引用方式实际上指向的是HSP调用方**entry模块下的图片资源目录**，需要将图片资源存放在entry模块中。

Q：如何设置Rating组件星星之间的间距？

A：可以参考以下两种方法：

方法一：通过contentModifier定制Rating内容区（参考自定义评分条），自定义星星的间距。

方法二：直接增加图片本身的宽度，不改变星星图形的尺寸，左右两边增加透明白边，即通过增加图片本身的宽度从而实现增加星星之间的间距。