以下是一个在 ArkTS 中实现简单评级功能的代码示例,示例以一个星级评分的形式呈现,用户可以点击星星来选择对应的评分等级,分数范围是 1 到 5 星。
1. 界面布局部分(使用.ets文件,假设为RatingExample.ets)
import { Component, Prop, State } from '@arkts/core';
@Entry
@Component
class RatingExample extends Component {
// 通过属性接收外部传入的初始评分(可选)
@Prop initialRating: number = 0;
// 使用状态变量来记录当前评分
@State currentRating: number = this.initialRating;
build() {
return Column({ space: 10 }) {
// 显示当前评分的文本提示
Text(`当前评分: ${this.currentRating}`).fontSize(16).textAlign(TextAlign.Center)
// 用于展示星星的行布局
Row({ justifyContent: FlexAlign.SpaceEvenly }) {
// 通过循环创建5个星星组件
ForEach(Array.from(new Array(5)), (_, index) => {
// 每个星星组件传递索引用于判断是否被选中
Star({ index: index + 1, currentRating: this.currentRating, onChange: this.updateRating })
})
}
}.width('100%').height('100%');
}
// 更新评分的方法,根据点击的星星索引来更新当前评分
updateRating = (newRating: number) => {
this.currentRating = newRating;
}
}
// 定义星星组件
@Component
class Star extends Component {
// 接收星星的索引、当前评分以及评分更新的回调函数
@Prop index: number;
@Prop currentRating: number;
@Prop onChange: (rating: number) => void;
build() {
// 根据当前评分和星星索引判断是否应该点亮星星(填充颜色)
let isFilled = this.index <= this.currentRating;
return Image({
// 根据是否点亮选择不同的图片资源(这里假设存在filled_star.png和empty_star.png图片资源)
src: isFilled? '$r(app.media.filled_star.png)' : '$r(app.media.empty_star.png)',
width: 30,
height: 30,
// 添加点击事件,点击时调用评分更新回调函数传递对应的评分
onClick: () => {
this.onChange(this.index);
}
});
}
}
2. 代码说明
RatingExample 组件
属性和状态定义:
通过 @Prop 定义了 initialRating 属性,用于接收外部传入的初始评分,默认值设为 0。
使用 @State 定义了 currentRating 变量来记录当前的评分,初始值设置为 initialRating 的值。
界面构建(build 方法):
首先展示一个文本组件,用于显示当前的评分数值,格式为 当前评分: [具体数值]。
接着通过 Row 组件创建了一个水平布局,在这个布局中使用 ForEach 循环创建了 5 个 Star 组件,模拟 5 颗星星用于评级。
评分更新方法(updateRating):
这是一个用于更新当前评分的方法,接收新的评分数值作为参数,然后将 currentRating 状态变量更新为传入的新评分值,这样界面会根据新的评分重新渲染(因为状态改变触发重新构建)。
Star 组件
属性定义:
通过 @Prop 分别定义了 index(星星的索引,从 1 开始)、currentRating(当前的总评分,用于和星星索引对比判断是否点亮该星星)以及 onChange(评分更新的回调函数,点击星星时调用该函数传递对应的评分)。
界面构建(build 方法):
根据当前评分和星星的索引对比,判断该星星是否应该被点亮(即是否填充颜色),通过设置不同的图片资源(假设存在 filled_star.png 和 empty_star.png 图片资源)来呈现点亮和未点亮的状态,点亮的星星使用填充颜色的图片,未点亮的使用空心的图片。
为每个星星组件添加了点击事件,当用户点击星星时,调用 onChange 回调函数并传递该星星对应的评分(也就是星星的索引值),从而实现点击星星更新整体评分的功能。
你可以在其他组件或者页面中使用 RatingExample 组件,并传入初始评分值(可选)来展示和使用这个评级功能,比如:
import { RatingExample } from './RatingExample.ets';
@Entry
@Component
class MainPage extends Component {
build() {
return RatingExample({ initialRating: 3 });
}
}
在上述示例中,初始展示的评级就是 3 星,用户可以点击星星来改变评分。当然,这只是一个基础的示例,你可以根据实际需求进一步扩展功能,比如添加半星评分、添加评分提交按钮将评分发送到服务器等。