【鸿蒙next开发】ArkUI框架：ArkTS组件-Rating

最新推荐文章于 2025-06-04 21:26:48 发布
最新推荐文章于 2025-06-04 21:26:48 发布
阅读量967 收藏 15
点赞数 20
分类专栏： 鸿蒙5.0开发 ArkUI框架 ArkTS组件 文章标签： harmonyos 华为 android ArkTS ArkUI 前端 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73088370/article/details/148141576
版权

 往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

Rating

提供在给定范围内选择评分的组件。

说明

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

Rating(options?: { rating: number, indicator?: boolean })

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
ratingnumber是

设置并接收评分值。

默认值：0

取值范围： [0, stars]

小于0取0，大于stars取最大值stars。

从API version 10开始，该参数支持$$双向绑定变量。

indicatorboolean否

设置评分组件作为指示器使用，不可改变评分。

默认值：false, 可进行评分

说明：

indicator=true时，默认组件高度height=12.0vp，组件width=height * stars。

indicator=false时，默认组件高度height=28.0vp，组件width=height * stars。

属性

stars

stars(value: number)

设置评分总数。设置为小于等于0的值时，按默认值显示。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是

设置评分总数。

默认值：5

stepSize

stepSize(value: number)

设置操作评级的步长。设置为小于0.1的值时，按默认值显示。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是

操作评级的步长。

默认值：0.5

取值范围：[0.1, stars]

starStyle

starStyle(value: { backgroundUri: string, foregroundUri: string, secondaryUri?: string })

设置评分的样式。该属性所支持的图片类型能力参考Image组件。

支持加载本地图片和网络图片，暂不支持PixelMap类型和Resource资源。

默认图片加载方式为异步，暂不支持同步加载。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value

{

backgroundUri: string,

foregroundUri: string,

secondaryUri?: string

}

是

backgroundUri：未选中的星级的图片链接，可由用户自定义或使用系统默认图片。

foregroundUri：选中的星级的图片路径，可由用户自定义或使用系统默认图片。

secondaryUri：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片。

说明：

backgroundUri或者foregroundUri或者secondaryUri设置的图片路径错误时，图片不显示。

backgroundUri或者foregroundUri设置为undefined或者空字符串时，rating会选择加载系统默认星型图源。

secondaryUri不设置或者设置的值为undefined或者空字符串时，优先设置为backgroundUri，效果上等同于只设置了foregroundUri、backgroundUri。

说明

rating宽高为[width, height]时，单个图片的绘制区域为[width / stars, height]。

为了指定绘制区域为方形，建议自定义宽高时采取[height * stars, height], width = height * stars的方式。

contentModifier12+

contentModifier(modifier: ContentModifier<RatingConfiguration>)

定制Rating内容区的方法。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
modifierContentModifier<RatingConfiguration>是

在Rating组件上，定制内容区的方法。

modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

事件

onChange

onChange(callback:(value: number) => void)

操作评分条的评星发生改变时触发该回调。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是评分条的评分。

键盘走焦规格

按键功能描述
Tab组件间切换焦点。
左右方向键评分预览增加/减少（步长为step），不改变实际分值。
Home移动到第一个星星， 不改变实际分值。
End移动到最后一个星星， 不改变实际分值。
Space/Enter根据当前评分提交评分结果。

RatingConfiguration12+对象说明

开发者需要自定义class实现ContentModifier接口。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型只读可选说明
ratingnumber否否

评分条当前评分数。

默认值：0

indicatorboolean否否

评分条是否作为一个指示器。

默认值：false

starsnumber否否

评分条的星级总数。

默认值：5

stepSizenumber否否

评分条的评分步长。

默认值：0.5

triggerChangeCallback<number>否否触发评分数量变化。

示例

示例1（设置默认评分样式）

该示例为创建默认星型评分样式。

// xxx.ets
@Entry
@Component
struct RatingExample {
  @State rating: number = 3.5


  build() {
    Column() {
      Column() {
        Rating({ rating: this.rating, indicator: false })
          .stars(5)
          .stepSize(0.5)
          .margin({ top: 24 })
          .onChange((value: number) => {
            this.rating = value
          })
        Text('current score is ' + this.rating)
          .fontSize(16)
          .fontColor('rgba(24,36,49,0.60)')
          .margin({ top: 16 })
      }.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 })


      Row() {
        Image('common/testImage.jpg')
          .width(40)
          .height(40)
          .borderRadius(20)
          .margin({ left: 24 })
        Column() {
          Text('Yue')
            .fontSize(16)
            .fontColor('#182431')
            .fontWeight(500)
          Row() {
            Rating({ rating: 3.5, indicator: false }).margin({ top: 1, right: 8 })
            Text('2021/06/02')
              .fontSize(10)
              .fontColor('#182431')
          }
        }.margin({ left: 12 }).alignItems(HorizontalAlign.Start)


        Text('1st Floor')
          .fontSize(10)
          .fontColor('#182431')
          .position({ x: 295, y: 8 })
      }.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}

示例2（设置评分的样式）

该示例通过配置starStyle实现自定义星级的图片链接。

// xxx.ets
@Entry
@Component
struct RatingExample {
  @State rating: number = 3.5


  build() {
    Column() {
      Rating({ rating: this.rating, indicator: false })
        .stars(5)
        .stepSize(0.5)
        .starStyle({
          backgroundUri: '/common/imag1.png', // common目录与pages同级
          foregroundUri: '/common/imag2.png',
          secondaryUri: '/common/imag3.png'
        })
        .margin({ top: 24 })
        .onChange((value: number) => {
          this.rating = value
        })
      Text('current score is ' + this.rating)
        .fontSize(16)
        .fontColor('rgba(24,36,49,0.60)')
        .margin({ top: 16 })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}

示例3（自定义评分条）

该示例实现了自定义评分条的功能，每个圆圈表示0.5分。ratingIndicator为true时表示评分条作为一个指示器不可改变评分；

为false时可以进行评分。ratingStars可改变评分总数。ratingStepsize可改变评分步长。

// xxx.ets
class MyRatingStyle implements ContentModifier<RatingConfiguration> {
  name: string = ""
  style: number = 0
  constructor(value1: string, value2: number) {
    this.name = value1
    this.style = value2
  }
  applyContent() : WrappedBuilder<[RatingConfiguration]> {
    return wrapBuilder(buildRating)
  }
}


@Builder function buildRating(config: RatingConfiguration) {
  Column() {
    Row() {
      Circle({ width: 25, height: 25 })
        .fill(config.rating >= 0.4 ? Color.Black : Color.Red)
        .onClick((event: ClickEvent) => {
          if (!config.indicator) {
            if (config.stepSize = 0.5) {
              config.triggerChange(0.5);
              return
            }
            if (config.stepSize = 1) {
              config.triggerChange(1);
              return
            }
          }
        }).visibility(config.stars >= 1 ? Visibility.Visible : Visibility.Hidden)
      Circle({ width: 25, height: 25 })
        .fill(config.rating >= 0.9 ? Color.Black : Color.Red)
        .onClick((event: ClickEvent) => {
          if (!config.indicator) {
            config.triggerChange(1);
          }
        }).visibility(config.stars >= 1 ? Visibility.Visible : Visibility.Hidden)
      Circle({ width: 25, height: 25 })
        .fill(config.rating >= 1.4 ? Color.Black : Color.Red)
        .onClick((event: ClickEvent) => {
          if (!config.indicator) {
            if (config.stepSize = 0.5) {
              config.triggerChange(1.5);
              return
            }
            if (config.stepSize = 1) {
              config.triggerChange(2);
              return
            }
          }
        }).visibility(config.stars >= 2 ? Visibility.Visible : Visibility.Hidden).margin({left:10})
      Circle({ width: 25, height: 25 })
        .fill(config.rating >= 1.9 ? Color.Black : Color.Red)
        .onClick((event: ClickEvent) => {
          if (!config.indicator) {
            config.triggerChange(2);
          }
        }).visibility(config.stars >= 2 ? Visibility.Visible : Visibility.Hidden)
      Circle({ width: 25, height: 25 })
        .fill(config.rating >= 2.4 ? Color.Black : Color.Red)
        .onClick((event: ClickEvent) => {
          if (!config.indicator) {
            if (config.stepSize = 0.5) {
              config.triggerChange(2.5);
              return
            }
            if (config.stepSize = 1) {
              config.triggerChange(3);
              return
            }
          }
        }).visibility(config.stars >= 3 ? Visibility.Visible : Visibility.Hidden).margin({left:10})
      Circle({ width: 25, height: 25 })
        .fill(config.rating >= 2.9 ? Color.Black : Color.Red)
        .onClick((event: ClickEvent) => {
          if (!config.indicator) {
            config.triggerChange(3);
          }
        }).visibility(config.stars >= 3 ? Visibility.Visible : Visibility.Hidden)
      Circle({ width: 25, height: 25 })
        .fill(config.rating >= 3.4 ? Color.Black : Color.Red)
        .onClick((event: ClickEvent) => {
          if (!config.indicator) {
            if (config.stepSize = 0.5) {
              config.triggerChange(3.5);
              return
            }
            if (config.stepSize = 1) {
              config.triggerChange(4);
              return
            }
          }
        }).visibility(config.stars >= 4 ? Visibility.Visible : Visibility.Hidden).margin({left:10})
      Circle({ width: 25, height: 25 })
        .fill(config.rating >= 3.9 ? Color.Black : Color.Red)
        .onClick((event: ClickEvent) => {
          if (!config.indicator) {
            config.triggerChange(4);
          }
        }).visibility(config.stars >= 4 ? Visibility.Visible : Visibility.Hidden)
      Circle({ width: 25, height: 25 })
        .fill(config.rating >= 4.4 ? Color.Black : Color.Red)
        .onClick((event: ClickEvent) => {
          if (!config.indicator) {
            if (config.stepSize = 0.5) {
              config.triggerChange(4.5);
              return
            }
            if (config.stepSize = 1) {
              config.triggerChange(5);
              return
            }
          }
        }).visibility(config.stars >= 5 ? Visibility.Visible : Visibility.Hidden).margin({left:10})
      Circle({ width: 25, height: 25 })
        .fill(config.rating >= 4.9 ? Color.Black : Color.Red)
        .onClick((event: ClickEvent) => {
          if (!config.indicator) {
            config.triggerChange(5);
          }
        }).visibility(config.stars >= 5 ? Visibility.Visible : Visibility.Hidden)
    }
    Text("分值：" + config.rating)
  }
}


@Entry
@Component
struct ratingExample {
  @State rating: number = 0;
  @State ratingIndicator: boolean = true;
  @State ratingStars: number = 0;
  @State ratingStepsize: number = 0.5;
  @State ratingEnabled: boolean = true;
  build() {
    Row() {
      Column() {
        Rating({
          rating: 0,
          indicator: this.ratingIndicator
        })
          .stepSize(this.ratingStepsize)
          .stars(this.ratingStars)
          .backgroundColor(Color.Transparent)
          .width('100%')
          .height(50)
          .onChange((value: number) => {
            console.info('Rating change is'+ value);
            this.rating = value
          })
          .contentModifier(new MyRatingStyle("hello", 3))
        Button(this.ratingIndicator ? "ratingIndicator : true" : "ratingIndicator : false")
          .onClick((event) => {
            if (this.ratingIndicator) {
              this.ratingIndicator = false
            } else {
              this.ratingIndicator = true
            }
          }).margin({top : 5})


        Button(this.ratingStars < 5 ? "ratingStars + 1, ratingStars =" + this.ratingStars : "ratingStars最大值为5")
          .onClick((event) => {
            if (this.ratingStars < 5) {
              this.ratingStars += 1
            }
          }).margin({top : 5})


        Button(this.ratingStars > 0 ? "ratingStars - 1, ratingStars =" + this.ratingStars : "ratingStars小于等于0时默认等于5")
          .onClick((event) => {
            if (this.ratingStars > 0) {
              this.ratingStars -= 1
            }
          }).margin({top : 5})


        Button(this.ratingStepsize == 0.5 ? "ratingStepsize : 0.5" : "ratingStepsize : 1")
          .onClick((event) => {
            if (this.ratingStepsize == 0.5) {
              this.ratingStepsize = 1
            } else {
              this.ratingStepsize = 0.5
            }
          }).margin({top : 5})
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }
}

HarmonyOS鸿蒙开发指南:基础组件 rating开发指导
sybh的博客
01-09 912
场景示例 开发者可以通过改变开关状态切换星级背景图，通过改变滑动条的值调整星级总数。
鸿蒙next 评分组件来了 我不允许你不会
xq610928的博客
08-05 167
各位同学大家，有段时间没有跟大家见面了，因为最近一直在更新鸿蒙的那个实战课程所以就没有去更新文章实在是不好意思， 所以今天就给大家更新一期实战案例 评分组件 希望帮助到各位同学工作和学习鸿蒙next 里面有自带评分组件 其实安卓原始和ios里面也有不过安卓ios更多是直接调用了系统评分库。这样弹出·位置样式都不能自定义更多时候还是要自己去实现 但是鸿蒙就提供了这个组件我们就可以跟进官方组件的属性来自定义我们更多的效果。
鸿蒙5.0进阶开发：UI开发-容器组件（rating开发）
AyomQAQ的博客
01-06 370
rating为评分条组件，表示用户使用感受的衡量标准条。
新手学鸿蒙-在自定义组件中插入图片预览中无法显示
nkjbbj的博客
05-12 469
自己检查发型错误应该是在调用自定义组件时传参不成功导致的，但是具体怎么改还是不知道，有前端大神懂嘛。
HarmonyOS Next开发学习手册——旋转屏动画增强
maniuT的博客
07-03 873
在原旋转屏动画基础上，可配置渐隐和渐现的转场效果。完整的代码示例和效果如下。需要在EntryAbility.ets文件的onWindowStageCreate方法中添加处理逻辑以获取屏幕的显示方向需要在项目的 module.json5 文件中的 abilities 列表里添加 “orientation”，指定为 “auto_rotation”
2024年HarmonyOS Next 大文件拷贝案例_鸿蒙next 拷贝本地文件(1)，2024年最新大厂面试必备技能有哪些
2401_84850808的博客
05-08 1398
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。为了能够帮助大家快速掌握**鸿蒙（HarmonyOS NEXT）**应用开发技术知识。在此给大家分享一下我结合鸿蒙最新资料整理出来的鸿蒙南北向开发学习路线以及整理的最新版鸿蒙学习文档资料。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Rating组件
weixin_47730343的博客
02-06 1399
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Rating组件
HarmonyOS Next开发学习手册——焦点事件
maniuT的博客
07-05 1455
由组件自定义的走焦算法，规格由组件定义。
【鸿蒙next开发】ArkUI框架：ArkTS组件-无障碍属性
m0_73088370的博客
05-15 891
本文介绍了鸿蒙5.0开发中的无障碍功能，包括无障碍组、无障碍文本、无障碍说明和无障碍重要性等核心概念。
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（自定义绘制设置）
Androidbye的博客
12-27 925
当某些组件本身的绘制内容不满足需求时...........
鸿蒙5.0版开发：ArkTS组件-Rating
m0_69424697的博客
11-10 883
提供在给定范围内选择评分的组件。
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（无障碍属性）
Androidbye的博客
12-26 699
组件可以设置相应的无障碍属性和事件来更好地使用无障碍能力。
鸿蒙5.0版开发：UI框架JS组件-基础组件（rating）
m0_69424697的博客
12-12 690
评分条，表示用户使用感受的衡量标准条。
【HarmonyOS 5】生活与服务开发实践详解以及服务卡片案例
2201_75709314的博客
06-04 1035
以上方案综合金融、生活服务等场景落地经验，依托HarmonyOS 5的分布式能力与安全架构，显著提升开发效率及用户体验。‌：定位权限检查、存储方案、组件层级优化。‌：大量蓝牙设备时建议使用分批次扫描策略。‌：金融业务需选择联系人场景。
【HarmonyOS 5】鸿蒙APP使用【团结引擎Unity】开发的案例教程
2201_75709314的博客
06-03 994
以下是基于团结引擎开发鸿蒙Unity应用的详细案例教程，整合环境配置、工程适配、跨语言通信等核心环节。
鸿蒙Navigation路由导航-基本使用介绍
最新发布
小学生波波
06-04 227
Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。
鸿蒙OS&UniApp微服务架构实践：从设计到鸿蒙部署#三方框架 #Uniapp
小淼淼的博客
06-01 733
通过这次实践，我们不仅成功构建了一个可扩展的微服务架构，还积累了宝贵的跨平台开发经验，特别是在鸿蒙系统适配方面。这些经验对于想要在UniApp框架下构建企业级应用的开发者来说，具有重要的参考价值。记住，好的架构不是一蹴而就的，需要在实践中不断优化和改进。在未来的开发中，我们也会持续关注鸿蒙生态的发展，及时更新和优化我们的架构设计。
【HarmonyOS 5】游戏开发教程
2201_75709314的博客
06-04 528
介绍了基于DevEco Studio的游戏开发全流程，包括开发环境配置、游戏引擎架构、分布式联机功能、性能优化策略等关键技术。重点展示了游戏主循环、物理碰撞系统等核心模块的实现，以及多设备协同的分布式技术应用。通过2D跑酷游戏案例，详细说明了角色控制和障碍物生成系统的开发方法。最后介绍了沉浸式全屏和AI代码生成等高级特性，为开发者提供了一套完整的游戏开发解决方案。
使用 React Native 开发鸿蒙（HarmonyOS）运动健康类应用的系统化准备工作
csdn_hjj_的博客
06-04 441
结合原子化服务（Atomic Service）实现功能模块拆分。：TypeScript 模板可提升类型安全性，减少兼容性问题。（在 DevEco Studio 的。​：注入鸿蒙适配逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值