「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件-阿里云开发者社区

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

2024-11-27 60

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

关键词

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