本篇将带你实现一个自定义评分星级组件，用户可以通过点击星星进行评分，并实时显示评分结果。为了让界面更具吸引力，我们还将添加一只小猫图片作为评分的背景装饰。
关键词
- 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()方法：
通过点击星星更新当前评分并实时反馈。
五、优化建议
- 添加评分重置功能：可在界面中加入“重置评分”按钮，让用户能重新选择评分。
- 增加动画效果：为星星点击添加轻微的缩放或颜色过渡效果，提升用户体验。
- 动态猫咪图片：根据评分展示不同状态的猫咪图片，例如高评分显示开心的猫咪，低评分显示伤心的猫咪。
六、相关知识点
小结
本篇教程通过自定义评分星级组件的实现，演示了如何利用 Button 和 Text 组件实现评分功能，并通过状态管理动态显示评分结果。添加猫咪图片增强了界面的趣味性，为用户带来更好的交互体验。
下一篇预告
下一篇「UI互动应用篇9 - 番茄钟倒计时应用」将展示如何实现一个番茄钟倒计时应用，用户可以设置专注时间和休息时间的时长。
上一篇： 「Mac畅玩鸿蒙与硬件30」UI互动应用篇7 - 简易计步器
下一篇： 「Mac畅玩鸿蒙与硬件32」UI互动应用篇9 - 番茄钟倒计时应用
作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=291
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
