当前位置：首页 > article >正文

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

article 2025/1/20 4:47:08

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

在这里插入图片描述

关键词

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