代码拉取完成，页面将自动刷新
本篇Codelab将引导开发者使用rating组件实现星级打分功能。
完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：
获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：
搭建烧录环境。
搭建开发环境。
本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在gitee中提供。
├──entry/src/main/js // 代码区
│ └──MainAbility
│ ├──common
│ │ └──images
│ │ ├──star_focus_yellow.svg // 前景图片
│ │ ├──star_half_yellow.svg // 次级背景图片
│ │ └──star_nor.svg // 背景图片
│ ├──i18n
│ │ ├──en-US.json // 英文国际化
│ │ └──zh-CN.json // 中文国际化
│ ├──pages
│ │ └──index
│ │ ├──index.css // 星级打分页面样式
│ │ ├──index.hml // 星级打分页面
│ │ └──index.js // 星级打分页面逻辑
│ └──app.js // 程序入口
└──entry/src/main/resource // 应用静态资源目录
界面主要由自定义星级打分和平均分等级两个部分组成。
本应用使用div组件用作外层容器，并将自定义星级组件和平均分等级分别放在两个div组件中。除此之外，自定义星级打分还使用了列表渲染，使用for循环一次渲染多个组件，onchange参数可以设置组件使用的事件响应方法，参数中的$idx则代表数组中的元素的索引值。
<!-- index.hml -->
<div class="container">
<!-- 自定义打分组件-->
<div class="sub-container">
...
<rating for="{{ ratings }}" onchange="rateChange({{ $idx }})" class="rate" rating="3"></rating>
</div>
<!-- 平均分等级展示-->
<div class="sub-container-average">
...
<rating class="rate-avg" indicator="true" stepsize="0.1" rating="{{ avg }}"></rating>
...
</div>
</div>
自定义星级打分的rating组件还可以设置星星样式，需要设置以下三个参数：
/* index.css */
/* 自定义星级打分样式 */
.rate {
star-background: url("/common/images/ic_star_nor.svg");
star-foreground: url("/common/images/ic_star_focus_yellow.svg");
star-secondary: url("/common/images/ic_star_half_yellow.svg");
width: 140vp;
height: 30vp;
margin-bottom: 10vp;
}
数据初始化，使用数组记录rating组件的分值，使用avg变量记录平均值。
// index.js
export default {
data: {
ratings: new Array(3, 3, 3),
avg: 3
},
...
}
当rating发生变化时，根据索引值更改对应元素的数据，并重新计算平均值。
// index.js
rateChange(idx, event) {
this.ratings.splice(idx, 1, event.rating);
this.getAvg();
},
getSum(total, num) {
return total + num;
},
getAvg() {
const value = this.ratings.reduce(this.getSum) / this.ratings.length;
this.avg = value.toFixed(1);
}
您已经完成了本次Codelab的学习，并了解到以下知识点：
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手