本篇将带你实现一个自定义评分星级组件,用户可以通过点击星星进行评分,并实时显示评分结果。为了让界面更具吸引力,我们还将添加一只小猫图片作为评分的背景装饰。
关键词
- 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 - 番茄钟倒计时应用」将展示如何实现一个番茄钟倒计时应用,用户可以设置专注时间和休息时间的时长。