HarmonyOS6 ArkTS Rating组件使用文档

文章目录完整代码核心参数与方法1 组件构造参数2 核心属性方法链式调用1星星数量设置stars2评分步长设置stepSize3星级样式自定义starStyle4评分变化回调onChange核心变量运行效果总结1 适用场景2 使用规范完整代码// RatingFullExample.ets Entry Component struct RatingFullExample { // 评分值 State score: number 3.5; // 是否为只读指示器 State isIndicator: boolean false; // 星星总数 State starCount: number 5; // 评分步长 State step: number 0.5; build() { Column({ space: 25 }) { Text(Rating 评分组件完整示例) .fontSize(26) .fontWeight(FontWeight.Bold) .margin({ top: 30 }); // 1. 默认评分组件 Column({ space: 12 }) { Text(1. 默认五星评分步长0.5) .fontSize(18) .alignSelf(ItemAlign.Start); Rating({ rating: this.score, indicator: this.isIndicator }) .stars(this.starCount) .stepSize(this.step) .onChange((value: number) { this.score value; console.info(当前评分 value); }) .width(300) .height(40); Text(当前得分${this.score.toFixed(1)}) .fontSize(16) .fontColor(#007DFF); } .width(90%) .padding(15) .backgroundColor(#F5F5F5) .borderRadius(12); // 2. 控制区 Column({ space: 15 }) { Text(2. 功能控制) .fontSize(18) .alignSelf(ItemAlign.Start); // 切换只读指示器 Row({ space: 10 }) { Text(只读模式指示器) .fontSize(16); Toggle({ type: ToggleType.Switch, isOn: this.isIndicator }) .onChange((val) { this.isIndicator val; }); } // 步长切换 Row({ space: 10 }) { Text(评分步长) .fontSize(16); Button(this.step 0.5 ? 0.5半星 : 1.0整星) .onClick(() { this.step this.step 0.5 ? 1.0 : 0.5; }) .width(140); } // 星星数量 Row({ space: 10 }) { Text(星星数量) .fontSize(16); Button(星星数${this.starCount}) .onClick(() { this.starCount this.starCount 10 ? 5 : this.starCount 1; }) .width(120); } } .width(90%) .padding(15) .backgroundColor(#F5F5F5) .borderRadius(12); // 3. 自定义样式评分使用系统默认样式可替换图片 Column({ space: 12 }) { Text(3. 自定义样式评分) .fontSize(18) .alignSelf(ItemAlign.Start); Rating({ rating: this.score, indicator: false }) .stars(5) .stepSize(0.5) .starStyle({ backgroundUri: , // 未选中星空则使用系统默认 foregroundUri: , // 选中星空则使用系统默认 secondaryUri: // 半星可选 }) .onChange((value) { this.score value; }) .width(300) .height(40); } .width(90%) .padding(15) .backgroundColor(#F5F5F5) .borderRadius(12); } .width(100%) .padding(10) .backgroundColor(#fff) } }运行效果如图核心参数与方法1 组件构造参数参数名类型必选/可选说明示例ratingnumber可选设置组件默认评分值支持小数3.5indicatorboolean可选设置组件模式true只读指示器false可交互评分false2 核心属性方法链式调用1星星数量设置stars类型number说明设置评分组件的星星总数默认值为 5示例.stars(this.starCount)2评分步长设置stepSize类型number说明设置评分最小间隔支持0.5半星和1.0整星示例.stepSize(this.step)3星级样式自定义starStyle类型RatingStyle说明配置星级图标资源属性为空时使用系统默认图标| 属性名 | 说明 ||--------|------|| backgroundUri | 未选中星级图标路径 || foregroundUri | 选中星级图标路径 || secondaryUri | 半星图标路径可选 |示例.starStyle({ backgroundUri: , foregroundUri: , secondaryUri: })4评分变化回调onChange回调参数value: number当前选中的评分值说明用户滑动/点击评分时触发可实时更新评分数据、打印日志示例.onChange((value: number) { this.score value; console.info(当前评分 value); })核心变量变量名类型初始值作用scorenumber3.5绑定组件评分值实时存储并展示当前评分isIndicatorbooleanfalse控制组件模式切换可交互/只读状态starCountnumber5控制评分组件的星星总数stepnumber0.5控制评分步长切换半星/整星模式运行效果默认评分区域初始化展示 5 颗星星默认评分 3.5支持半星选择下方实时显示当前得分功能控制区域开关开启后评分组件变为只读模式无法点击/滑动修改评分按钮可切换0.5 半星和1.0 整星两种步长点击按钮可递增星星数量达到 10 颗后重置为 5 颗自定义样式区域使用系统默认星级图标可通过填写图标路径替换为自定义样式评分状态与全局评分同步所有操作触发的评分变化均会实时更新页面数据并在控制台打印评分日志。总结1 适用场景用户评价、商品评分、服务打分等可交互评分场景个人等级、商家评分、作品评分等只读展示场景配置类页面、个性化设置中的星级选择场景。2 使用规范交互模式需要用户主动评分时设置indicator: false仅用于展示分数时设置indicator: true步长选择追求精细评分使用 0.5 步长简约评分使用 1.0 步长样式规范自定义图标需保持尺寸一致避免星星显示错位数据绑定必须使用状态变量绑定评分保证数据响应式更新。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力