HarmonyOS鸿蒙Next中Rating如何设置图片间间距

### 设备信息
- **Mate60**

### API版本
- Api13

### DevEco Studio版本
- 5.0.7.200

### 问题描述
rating中每个子图片宽度为30，我设置rating的width为（30*5 +40）想要实现每个图片中间间距10，但最终实现的效果却是图片被拉伸了，如何添加间距？

ionicwang 1楼

Rating组件本身并没有直接提供设置间距的属性，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-rating-V5#%E7%A4%BA%E4%BE%8B1%E8%AE%BE%E7%BD%AE%E9%BB%98%E8%AE%A4%E8%AF%84%E5%88%86%E6%A0%B7%E5%BC%8F

建议自定义宽高时采取[height * stars, height], width = height * stars的方式。

Rating({ rating: this.rating, indicator: true })
    .stars(5)
    .stepSize(0.5)
    .starStyle({
        backgroundUri:'/common/background.png',
        foregroundUri:'/common/startIcon.png'
    })
    .onChange((value: number) => {
        this.rating = value
    }).width(this.hei * 5).height(this.hei)

可以直接增加 background.png 图片本身的宽度，不改变星星图形的大小，左右两边增加透明白边，即通过增加图片本身的宽度从而实现增加星星之间间距

当前如果不自定义 starStyle 图片，使用Rating默认的图片，是可以实现增加width时，星星之间自动扩大间距，而不是拉宽图片；
自定义starStyle 时，没有自动扩展间距的效果，而是拉宽图片

更多关于HarmonyOS鸿蒙Next中Rating如何设置图片间间距的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 2楼

在HarmonyOS鸿蒙Next中，设置Rating组件中图片间的间距可以通过调整Rating的padding属性来实现。Rating组件默认使用星星图标进行评分，你可以通过自定义图标来替换默认的星星图标。要设置图片间的间距，可以在Rating组件的布局属性中通过padding来控制图标之间的间隔。

例如，在XML布局文件中，你可以这样设置：

<Rating
    ohos:id="$+id:rating"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:padding="10vp"
    ohos:rating="3"
    ohos:step_size="0.5"
    ohos:num_stars="5"
    ohos:star_image="$media:custom_star"/>

在这个例子中，ohos:padding="10vp"设置了Rating组件中图标之间的间距为10vp。你可以根据需要调整padding的值来增加或减少图标间的间距。

此外，你也可以在代码中动态设置Rating的间距：

Rating rating = (Rating) findComponentById(ResourceTable.Id_rating);
rating.setPadding(10, 10, 10, 10);

通过setPadding方法，你可以分别设置Rating组件的左、上、右、下的间距。

总结来说，通过调整Rating组件的padding属性，可以有效地控制图片间的间距。

phonegap100 3楼

在HarmonyOS鸿蒙Next中，可以通过设置rating_image的spacing属性来调整Rating组件中图片间的间距。具体方法如下：

在XML布局文件中定义Rating组件时，使用ohos:spacing属性：

<Rating
    ohos:id="$+id:rating"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:rating_image="$graphic:star"
    ohos:spacing="10vp"/>

在Java代码中动态设置：

Rating rating = (Rating) findComponentById(ResourceTable.Id_rating);
rating.setSpacing(10);

spacing值可以是vp单位，根据需求调整数值即可。