ArkUI Rating：五颗星别乱摆，评分也要有分寸

这篇我们看 Rating。

评分控件很容易被当成装饰：随手放五颗星，看起来热闹，但用户不知道评分代表满意度、难度，还是推荐指数。我们这篇先把它写得克制一点。

这个 Demo 只展示 Rating 本身：默认分值、星星数量、半星步进、只读展示和禁用态。不自定义星星图片，也不引入额外资源。

参考文档：

• https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui
• https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-ui-development

rating 是当前分值

最小写法很直接：

Rating({ rating: 4 })
  .stars(5)

rating 是当前分值，stars(5) 表示一共五颗星。

案例里没有只丢一个评分控件，而是配了标题和说明。因为评分必须说清楚它评的是什么：课程满意度、内容难度，还是页面观感。

stepSize 控制颗粒度

如果只允许整星：

.stepSize(1)

如果想允许半星：

.stepSize(0.5)

半星不是越多越好。只有当评价确实需要更细腻时，再用 0.5。否则整星更容易理解。

indicator 适合展示结果

indicator: true 更像只读展示。

Rating({ rating: 4.5, indicator: true })
  .stars(5)
  .stepSize(0.5)

比如“综合口碑”这种结果展示，就不应该让用户以为可以直接改。

禁用态和只读态不是一回事

只读态是展示结果，禁用态是这个控件当前不能操作。

Rating({ rating: 4, indicator: true })
  .enabled(false)

案例里“评分已锁定”就是禁用态。它不仅控件变弱，文案也说明了原因。

打开案例页时，可以先看一个问题：这个评分是让用户输入，还是只展示结果？如果这个问题没想清楚，五颗星再漂亮也没用。

完整示例代码

文件位置：entry/src/main/ets/pages/arkUI/basic/ArkUIRatingDemo.ets

@Entry
@Component
struct ArkUIRatingDemo {
  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 4 }) {
      Text(title)
        .width('100%')
        .fontSize(16)
        .fontWeight(700)
        .fontColor('#0F172A')

      Text(desc)
        .width('100%')
        .fontSize(13)
        .fontColor('#64748B')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  ratingBlock(title: string, desc: string, rating: number, stars: number, step: number, indicator: boolean,
    enabled: boolean, borderColor: string) {
    Column({ space: 10 }) {
      Row() {
        Text(title)
          .fontSize(15)
          .fontWeight(700)
          .fontColor(enabled ? '#0F172A' : '#94A3B8')
          .layoutWeight(1)

        Text(rating.toString() + ' / ' + stars.toString())
          .fontSize(13)
          .fontWeight(700)
          .fontColor(enabled ? '#C2410C' : '#94A3B8')
      }
      .width('100%')

      Text(desc)
        .width('100%')
        .fontSize(12)
        .fontColor(enabled ? '#64748B' : '#94A3B8')
        .lineHeight(18)

      Rating({ rating: rating, indicator: indicator })
        .stars(stars)
        .stepSize(step)
        .enabled(enabled)
    }
    .width('100%')
    .padding(14)
    .backgroundColor(enabled ? '#FFFFFF' : '#F1F5F9')
    .border({ width: 1, color: enabled ? borderColor : '#CBD5E1' })
    .borderRadius(8)
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    Scroll() {
      Column({ space: 18 }) {
        Text('ArkUI Rating')
          .width('100%')
          .fontSize(24)
          .fontWeight(700)
          .fontColor('#0F172A')

        Text('五颗星别乱摆，评分也要有分寸')
          .width('100%')
          .fontSize(22)
          .fontWeight(700)
          .fontColor('#111827')

        Text('这一页只看 Rating 自己：默认分值、星星数量、半星步进、只读展示和禁用态。不自定义星星图片，也不引入额外资源。')
          .width('100%')
          .fontSize(14)
          .fontColor('#64748B')
          .lineHeight(22)

        Column({ space: 12 }) {
          this.sectionTitle('默认分值要和文案对上', '评分不是装饰。旁边最好写清楚它代表体验、难度，还是满意度。')

          this.ratingBlock('课程满意度', '默认 4 分，表达整体不错但还有提升空间。', 4, 5, 1, false, true, '#FED7AA')
          this.ratingBlock('内容难度', '3 分表示中等难度，新手还能跟上。', 3, 5, 1, false, true, '#FED7AA')
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#FFF7ED')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('半星适合更细的评价', '如果评价需要更细腻，可以把 stepSize 设成 0.5。')

          this.ratingBlock('页面观感', '4.5 分比 4 分更接近真实感受。', 4.5, 5, 0.5, false, true, '#DDD6FE')
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F5F3FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('只读态适合展示结果', 'indicator 为 true 时，更像展示评分结果，而不是邀请用户马上操作。')

          this.ratingBlock('综合口碑', '这里只展示结果，不让用户直接修改。', 4.5, 5, 0.5, true, true, '#BFDBFE')
          this.ratingBlock('评分已锁定', '评价提交后暂时不能修改。', 4, 5, 1, true, false, '#CBD5E1')
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#EFF6FF')
        .borderRadius(8)
      }
      .width('100%')
      .padding(20)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}