「Mac畅玩鸿蒙与硬件31」UI互动应用篇8

「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件

本篇将带你实现一个自定义评分星级组件，用户可以通过点击星星进行评分，并实时显示评分结果。为了让界面更具吸引力，我们还将添加一只小猫图片作为评分的背景装饰。

在这里插入图片描述

关键词

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) // 设置页面内边距}
}