文档知识库教程OpenHarmony【免费下载链接】CangjieCorpus本仓库为仓颉编程语言语料库聚焦 仓颉编程语言 核心知识体系整合官方开发指南、API 文档、典型代码示例及语法规范等多维度资源经结构化处理与专业标注构建为支持 RAG检索增强生成技术 的高质量知识基座适配智能编码助手、学习辅助工具等应用开发需求。 欢迎开发者基于本语料库构建仓颉语言智能应用推动鸿蒙开发生态智能化升级项目地址https://gitcode.com/Cangjie/CangjieCorpus点击查看免费下载本文基于 CangjieCorpus 语料库中 ArkUI方舟UI框架的 Rating 组件参考文档 编写系统讲解仓颉语言 ArkUI-CJ 框架中 Rating评分组件的构造方式、stars/stepSize/starStyle三个核心组件属性与onChange回调事件。读完后你可以独立完成一个可交互的星级评分控件并掌握自定义星级图片、半星步进以及只读指示器模式的完整实现方案。一、组件定位与使用前提Rating 是一个提供在给定范围内选择评分的组件属于 ArkUI-CJ 按钮与选择类别的仓颉组件在 ArkUI-CJ 组件总览 中与 Button、Toggle、Slider、Select 等并列。它没有子组件子组件无因此是一个纯容器式的叶子组件所有展示行为都由自身属性驱动。使用前提如下导入模块import kit.ArkUI.*系统能力SystemCapability.ArkUI.ArkUI.FullRating 的所有 API 均依赖该系统能力起始版本22通用属性/通用事件全部支持。尺寸width/height/margin、背景色、透明度、显隐控制等通用属性以及点击、触摸、挂载卸载等通用事件均可正常作用于 Rating 组件参考 通用属性 与 通用事件 章节。二、创建组件init 构造参数Rating 的构造签名为public init(rating!: ?Float64, indicator!: ?Bool None)功能构造一个在给定范围内选择评分的组件。参数说明参数名类型必填默认值说明rating?Float64是-命名参数。设置并接收评分值。初始值0.0。取值范围[0, stars]小于 0 取 0大于 stars 取最大值 stars。indicator?Bool否None命名参数。设置评分组件作为指示器使用不可改变评分。初始值false可进行评分。indicatortrue时默认组件高度height12.0.vp组件widthheight * starsindicatorfalse时默认组件高度height28.0.vp组件widthheight * stars。从参数设计可以看出两个要点评分值是双向的rating既是构造时的初始评分也是回调时接收评分的载体——配合onChange更新State变量即可实现状态驱动的评分同步见第五节示例指示器模式只改变尺寸与交互不改变 APIindicator为true时组件变为只读展示不可点击改分同时默认尺寸更小高 12.0.vp适合嵌入列表项、卡片等紧凑排版中。默认宽度规则width height * stars意味着组件是方形单星 × 星数的横向条带。三、组件属性3.1 stars设置评分总数public func stars(value: ?Int32): This功能设置评分总数。设置为小于等于 0 的值时按初始值显示。参数名类型必填说明value?Int32是设置评分总数。初始值5。注意其非法值回退语义传入 0时不会报错或清空而是按初始值 5 显示这是一种防御式 API 设计。返回值类型为This因此支持链式调用。3.2 stepSize设置操作评级的步长public func stepSize(size: ?Float64): This功能设置操作评级的步长。设置为小于等于 0.0 的值时按初始值显示。参数名类型必填说明size?Float64是操作评级的步长。初始值0.5。取值范围0.0, stars]。步长决定了用户可以打几分的颗粒度stepSize(1)只能打整星1、2、3、4、5stepSize(0.5)默认值支持半星如 3.5取值范围为开区间左端0.0, stars]即步长必须大于 0 且不超过星数总数设置 0.0时回退到初始值 0.5。3.3 starStyle设置评分的样式public func starStyle(backgroundUri!: ?ResourceStr, foregroundUri!: ?ResourceStr, secondaryUri!: ?ResourceStr None): This功能设置评分的样式。该属性所支持的图片类型能力参考 Image 组件。支持加载本地图片和网络图片暂不支持 PixelMap 类型和 Resource 资源。默认图片加载方式为异步暂不支持同步加载。参数名类型必填默认值说明backgroundUri?ResourceStr是-命名参数。未选中的星级的图片链接可由用户自定义或使用系统默认图片。初始值。foregroundUri?ResourceStr是-命名参数。选中的星级的图片路径可由用户自定义或使用系统默认图片。初始值。secondaryUri?ResourceStr否None命名参数。部分选中的星级的图片路径可由用户自定义或使用系统默认图片。初始值取 backgroundUri 的值。关于三张星级图的行为约定文档中说明部分的完整要点backgroundUri未选中的星级的图片链接可由用户自定义或使用系统默认图片foregroundUri选中的星级的图片路径可由用户自定义或使用系统默认图片secondaryUri部分选中的星级的图片路径可由用户自定义或使用系统默认图片rating 宽高为 [width, height] 时单个图片的绘制区域为[width / stars, height]为了指定绘制区域为方形建议自定义宽高时采取[height * stars, height]、即width height * stars的方式backgroundUri、foregroundUri或secondaryUri设置的图片路径错误时图片不显示backgroundUri或foregroundUri设置为空字符串时rating 会选择加载系统默认星型图源secondaryUri不设置或者设置的值为空字符串时优先设置为 backgroundUri效果上等同于只设置了 foregroundUri、backgroundUri。这里有一个实践上很关键的细节secondaryUri对应部分选中的半星。当你使用stepSize(0.5)时3.5 分中的第 4 颗星会显示为半亮状态如果只提供了前景/背景两张图半星会退化为与背景图相同的显示。因此需要半星视觉区分时务必显式提供第三张secondaryUri。另外三张图参数的类型为ResourceStr。从 基础类型定义 可以看到ResourceStr是一个空接口并通过extend String : ResourceStr {}扩展 String 为其子类——也就是说在仓颉侧该接口本质上约束字符串入参这一可空字符串类别图片链接以字符串形式本地路径、网络 URL 或 data URI传入。四、组件事件 onChangepublic func onChange(callback: ?(Float64) - Unit): This功能操作评分条的评星发生改变时触发该回调。参数名类型必填默认值说明callback?(Float64) - Unit是-评分条的评分。初始值{ _ }空闭包。回调参数即用户操作后的最新评分值Float64。默认回调为空闭包因此不设置onChange时评分变化不会向外部传播——若要让评分值参与界面其他部分的联动如展示文本、提交表单必须显式注册回调并通常将其与State状态变量结合实现用户操作 → 状态更新 → 界面刷新的单向数据流。该状态管理机制可参考 组件级变量的状态管理。五、示例代码以下两个示例完整继承自 Rating 参考文档原文档中每个示例均标注了run运行标记效果展示为 GIF 动图。5.1 示例 1设置默认评分样式该示例为创建默认星型评分样式上半部分是一个可交互的 5 星评分条半星步长评分值绑定State var rating并通过onChange回写下方Text实时展示当前分值下半部分展示了一个嵌入信息行的小尺寸评分展示3.5 分 日期模拟评论卡片的排版场景。package ohos_app_cangjie_entry import kit.ArkUI.* import ohos.arkui.state_macro_manage.* import ohos.i18n.* import ohos.resource_manager.* import ohos.resource.__GenerateResource__ Entry Component class EntryView { State var rating: Float64 3.5 func build() { Column() { Column() { Rating(rating: rating, indicator: false) .stars(5) .stepSize(0.5) .margin(24) .onChange({value: Float64 this.rating value }) Text(current score is ${this.rating}) .fontSize(16) .fontColor(0x182431) .margin( 16 ) }.width(360).height(113).backgroundColor(Color.White).margin(top: 68 ) Row() { Image(r(app.media.startIcon)) .width(40) .height(40) .borderRadius(20) .margin(left: 24 ) Column() { Text(Cangjie) .fontSize(16) .fontColor(Color.Black) .fontWeight(FontWeight.Bold) Row() { Rating(rating: 3.5, indicator: false ).margin(top: 1, right: 8 ) Text(2024/07/01) .fontSize(10) .fontColor(Color.Black) } }.margin(left: 12 ).alignItems(HorizontalAlign.Start) Text(1st Floor) .fontSize(10) .fontColor(Color.Black) .position( x: 295, y: 8 ) }.width(360).height(56).backgroundColor(Color.White).margin(top: 64 ) }.width(100.percent).height(100.percent) } }示例要点可交互评分条使用命名参数Rating(rating: rating, indicator: false)构造随后链式设置.stars(5)、.stepSize(0.5)onChange闭包内执行this.rating value将回调分值写回State变量从而驱动下方Text(current score is ${this.rating})自动刷新第二个Rating(rating: 3.5, indicator: false)未绑定State也未设置onChange是一个静态展示用法用于说明组件可直接以字面量初始评分嵌入任意布局如 Row。5.2 示例 2设置评分的样式该示例通过配置starStyle实现自定义星级的图片链接两张图片均以 base64 data URI 字符串形式内嵌分别作为未选中backgroundUri与选中foregroundUri的图源。package ohos_app_cangjie_entry import kit.ArkUI.* import ohos.arkui.state_macro_manage.* Entry Component class EntryView { State var rating: Float64 3.5 State var backPng: String data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAj1JREFUSEu11UuojWEUBuDnOC5nIISSQoQyQRIZIRSiiHCKESMiBiTFDCEZSZmgTGRAuSYdQq6JxEQhl1JCkmukfOv0/adtt8/ePzpf7f6997/Wetda71rv16SLT1MXx9cZQA9MyeCv8RI/q5LphqEYRnucW/hRnXA1wEBsSgFXIr4X5yv2YC/i5sM6DC5iOOYAfeFv9XAgzCFYzGtQSwH/QC/OxGu8xHcvz8wQeJuDeyXZt/u9Z8pZq5oUQS5jlGYgXs1uBmDU7myObhTw2Ys2lIybzAZ34oKNmMXVqWeHqpD/OBcXV9MwvMatstwDFujXQXAI/zCBJTFSCR/XpEi2qduiZ3o8LgO55QqLn60oAlDHZhw1oDoBKZsPRUllvEvYbEkV7ExtbwmAHzJBLaWcC5jEhzMioEoODiHiWmOhwfzZSLUsWnBC1xGawGwBMcT0dsSJ9v/EyAWNZYyKmgrAOJ5AzHHUcnjfwSJXQnJeJAqmBYxKjc5NjjGK7QnluTTX4KELt3Mmx869rQaIH7PxZk851FikF/m9MZD8HUnGi7Xy01XYGjSTKuYh4N0AIwbuACViQExw6UyulJwcrifyp5dp5IIfilzFzITPncehdOlHoyqJihEpWnpG4mOERWk4TteqtNGNFntxFiMQIlYECc06n1u8MHF3u7M2NgIIvz5Z1OIeOJBFcQ2eJGJDtl/V46gMQPg3J7I3ZjmPyVgvtWNxqxsgCN4nT6vssBfgOltGMhyH2RwgAAAABJRU5ErkJggg State var forePng: String data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAcdJREFUSEu11b9LVXEYx/GXKWU4RGAN4RBESFNQkEQUBkrRkOHUUtQ/EARNtbZFlDgKDjU4SSFOOilCRZBISxTYELUUQUuUVnQeOScO955z77l0/E7nx/N83t/nPzdNnm0bXNsoAOzGEbvzGM/wqmMwADrKl8xybjTGNgP24jWvYkwvlLw/wCR4gIe4nAu5gumcQ/xvDXygANYxqEWy/Yao9iLRUQFjeMtziIm9Q/Qm5Z4tMKevEshsXyxLPsKclZxMqrNKriDuxXEs5D3OJMAzmOqJO8W7meANxjsABChHxCVF1UQ/1/heAB6ina/Q1hRAZ2BaAfn2sQLJLoCcAOfA9azZCPccqyPVhIT0adjMe4mgEuJ5s8U6c6TmMlA8SZfhG7XhNkCcONN/kIXiZXve8/Id9wAnGjm8xuDE8KvldlhkFTYQ5NnlR9u0KHlVVzMWF617CfD63zK5vJIY20QHkD64XTaxVw7kZXlJhuX4ktnAxddemObXraCOYw6SatYxjrWyatsBIi9c82naA/I6ceLCTb2WsoqgMiPtjibVHMsFYs7cw5xJFuOqoAQCdc9laqtpL26nX5p02bWDXgL/kuQxxwPkE6AAAAAElFTkSuQmCC func build() { Column() { Rating(rating: rating, indicator: false) .stars(5) .stepSize(0.5) .starStyle( backgroundUri: backPng, foregroundUri: forePng ) .margin(24) .onChange({value: Float64 this.rating value }) Text(current score is ${this.rating}) .fontSize(16) .fontColor(0x182431) .margin(16) } .width(100.percent) .padding(top: 5) } }示例要点自定义图源以String状态变量持有传入starStyle时分别对应命名参数backgroundUri、foregroundUri未设置secondaryUri按文档语义此时半星效果退化为与backgroundUri相同的显示图源是 base64 内嵌 data URI印证了支持本地图片、暂不支持 PixelMap 和 Resource 资源的能力边界——仓颉侧传入的始终是字符串链接。六、实践要点小结尺寸规划自定义宽高时遵循width height * stars保证每颗星绘制区域[width / stars, height]为方形避免星图被横向拉伸默认图源backgroundUri/foregroundUri传空字符串或不设置 starStyle即使用系统默认星型图源零成本即可得到标准星级控件非法值回退stars传入 0、stepSize传入 0.0均按初始值5 / 0.5显示rating超出 [0, stars] 时会被钳制到边界值无需额外校验只读展示需要纯展示如列表中的历史评分时使用indicator: true组件默认缩小为 12.0.vp 高且不可交互状态联动可交互场景下固定搭配State变量 onChange回写形成状态驱动的评分 UI网络图源若使用网络图片作为星级图源参考 Image 组件 的权限说明需在 module.json5 的requestPermissions中申请ohos.permission.INTERNET权限。更多 ArkUI-CJ 组件与公共类型定义可继续在 ArkUI-CJ 组件参考目录 中查阅例如 按钮组件 Button、滑动条 Slider 与 基础类型定义。赞分享文档知识库教程OpenHarmony【免费下载链接】CangjieCorpus本仓库为仓颉编程语言语料库聚焦 仓颉编程语言 核心知识体系整合官方开发指南、API 文档、典型代码示例及语法规范等多维度资源经结构化处理与专业标注构建为支持 RAG检索增强生成技术 的高质量知识基座适配智能编码助手、学习辅助工具等应用开发需求。 欢迎开发者基于本语料库构建仓颉语言智能应用推动鸿蒙开发生态智能化升级项目地址https://gitcode.com/Cangjie/CangjieCorpus点击查看免费下载相关推荐OpenHarmony ArkUI(CJ) Divider 分隔器组件详解创建、方向控制与样式定制OpenHarmony ArkUI CJ Divider 分隔器组件详解创建、方向控制与样式定制 本文基于 OpenHarmony 仓颉Cangjie应用文档知识库教程OpenHarmony仓颉 ArkUI 文本显示组件详解Text 与 Span 的创建、样式定制与事件响应实战指南仓颉 ArkUI 文本显示组件详解Text 与 Span 的创建、样式定制与事件响应实战指南 本篇技术指南以 OpenHarmony 仓颉CangjieA文档知识库教程OpenHarmonyToolJet Star Rating 组件完全指南星级评分组件的属性、事件、样式与源码实现ToolJet Star Rating 组件完全指南星级评分组件的属性、事件、样式与源码实现 导读 Star Rating星级评分是 ToolJet 应用低代码后端前端AI 应用MCP 服务上一篇actionlint 项目使用教程GitHub Actions 工作流静态检查终极指南下一篇news-please革命性新闻爬虫工具一站式解决新闻信息提取难题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考