本篇将带你实现一个自定义评分星级组件，用户可以通过点击星星进行评分，并实时显示评分结果。为了让界面更具吸引力，我们还将添加一只小猫图片作为评分的背景装饰。
关键词
- UI互动应用
- 评分系统
- 自定义星级组件
- 状态管理
- 用户交互
一、功能说明
该自定义评分星级组件允许用户点击星星进行评分，评分范围从 1 到 5 星。点击星星时，页面会更新显示当前评分。同时，界面上添加了一只可爱的猫咪图片来增添趣味性。
二、所需组件
@Entry和@Component装饰器Column和Row布局组件Image组件用于显示猫咪图片Text组件用于显示评分结果Button组件用于用户交互@State修饰符用于状态管理
项目结构
- 项目名称：
StarRatingApp - 自定义组件名称：
StarRatingPage - 代码文件：
StarRatingPage.ets、Index.ets
三、代码实现
// 文件名：StarRatingPage.ets// 定义评分页面组件
@Component
export struct StarRatingPage {@State currentRating: number = 0; // 当前评分maxRating: number[] = [1, 2, 3, 4, 5]; // 评分的最大星级数// 构建页面布局和组件build() {Column({ space: 20 }) { // 创建垂直布局容器，子组件间距为 20// 显示猫咪图片Image($r('app.media.cat')).width('30%').height('67%').margin({ bottom: 20 }).alignSelf(ItemAlign.Center);// 显示评分标题Text('请给猫咪评分:').fontSize(24).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Center);// 评分星星组件Row({ space: 10 }) {ForEach(this.maxRating, (star: number) => {Button(this.currentRating >= star ? '★' : '☆') // 根据评分状态显示实心或空心星星.fontSize(30).onClick(() => {this.setRating(star); // 点击星星时更新评分}).backgroundColor(Color.Transparent) // 背景透明.fontColor(this.currentRating >= star ? Color.Yellow : Color.Gray); // 设置选中与未选中颜色});}.justifyContent(FlexAlign.Center);// 显示当前评分结果Text(`评分: ${this.currentRating} / ${this.maxRating.length}`).fontSize(20).margin({ top: 20 }).alignSelf(ItemAlign.Center);}.padding(20).width('100%').height('100%').alignItems(HorizontalAlign.Center);}// 更新评分的方法private setRating(rating: number) {this.currentRating = rating; // 设置当前评分}
}
// 文件名：Index.ets// 导入评分页面组件
import { StarRatingPage } from './StarRatingPage'// 定义应用入口组件
@Entry
@Component
struct Index {build() {Column() {StarRatingPage() // 引用评分页面组件}.padding(20) // 设置页面内边距}
}
效果示例：用户点击星星即可评分，选中的星星会变为黄色，未选中的星星保持灰色。屏幕上会显示猫咪图片，评分体验更具趣味性。
四、代码解读
@State currentRating：
保存当前的评分值，点击星星时更新评分并触发 UI 重绘。Button组件：
用于实现星星图标的点击操作，点击时根据评分状态显示实心或空心星星。setRating()方法：
通过点击星星更新当前评分并实时反馈。
五、优化建议
- 添加评分重置功能：可在界面中加入“重置评分”按钮，让用户能重新选择评分。
- 增加动画效果：为星星点击添加轻微的缩放或颜色过渡效果，提升用户体验。
- 动态猫咪图片：根据评分展示不同状态的猫咪图片，例如高评分显示开心的猫咪，低评分显示伤心的猫咪。
六、相关知识点
- 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解
- 「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
小结
本篇教程通过自定义评分星级组件的实现，演示了如何利用 Button 和 Text 组件实现评分功能，并通过状态管理动态显示评分结果。添加猫咪图片增强了界面的趣味性，为用户带来更好的交互体验。
下一篇预告
下一篇「UI互动应用篇9 - 番茄钟倒计时应用」将展示如何实现一个番茄钟倒计时应用，用户可以设置专注时间和休息时间的时长。
