首页 > 其他分享 >鸿蒙开发-ArkTS 中实现评级功能

鸿蒙开发-ArkTS 中实现评级功能

时间:2024-12-04 18:01:42浏览次数:10  
标签:星星 index ArkTS 鸿蒙 评分 评级 currentRating RatingExample 组件

以下是一个在 ArkTS 中实现简单评级功能的代码示例,示例以一个星级评分的形式呈现,用户可以点击星星来选择对应的评分等级,分数范围是 1 到 5 星。

1. 界面布局部分(使用.ets文件,假设为RatingExample.ets)

import { Component, Prop, State } from '@arkts/core';

@Entry
@Component
class RatingExample extends Component {
    // 通过属性接收外部传入的初始评分(可选)
    @Prop initialRating: number = 0;
    // 使用状态变量来记录当前评分
    @State currentRating: number = this.initialRating;

    build() {
        return Column({ space: 10 }) {
            // 显示当前评分的文本提示
            Text(`当前评分: ${this.currentRating}`).fontSize(16).textAlign(TextAlign.Center)
            // 用于展示星星的行布局
            Row({ justifyContent: FlexAlign.SpaceEvenly }) {
                // 通过循环创建5个星星组件
                ForEach(Array.from(new Array(5)), (_, index) => {
                    // 每个星星组件传递索引用于判断是否被选中
                    Star({ index: index + 1, currentRating: this.currentRating, onChange: this.updateRating })
                })
            }
        }.width('100%').height('100%');
    }

    // 更新评分的方法,根据点击的星星索引来更新当前评分
    updateRating = (newRating: number) => {
        this.currentRating = newRating;
    }
}

// 定义星星组件
@Component
class Star extends Component {
    // 接收星星的索引、当前评分以及评分更新的回调函数
    @Prop index: number;
    @Prop currentRating: number;
    @Prop onChange: (rating: number) => void;

    build() {
        // 根据当前评分和星星索引判断是否应该点亮星星(填充颜色)
        let isFilled = this.index <= this.currentRating;
        return Image({
            // 根据是否点亮选择不同的图片资源(这里假设存在filled_star.png和empty_star.png图片资源)
            src: isFilled? '$r(app.media.filled_star.png)' : '$r(app.media.empty_star.png)',
            width: 30,
            height: 30,
            // 添加点击事件,点击时调用评分更新回调函数传递对应的评分
            onClick: () => {
                this.onChange(this.index);
            }
        });
    }
}

2. 代码说明

RatingExample 组件

属性和状态定义:

通过 @Prop 定义了 initialRating 属性,用于接收外部传入的初始评分,默认值设为 0。

使用 @State 定义了 currentRating 变量来记录当前的评分,初始值设置为 initialRating 的值。

界面构建(build 方法):

首先展示一个文本组件,用于显示当前的评分数值,格式为 当前评分: [具体数值]。

接着通过 Row 组件创建了一个水平布局,在这个布局中使用 ForEach 循环创建了 5 个 Star 组件,模拟 5 颗星星用于评级。

评分更新方法(updateRating):

这是一个用于更新当前评分的方法,接收新的评分数值作为参数,然后将 currentRating 状态变量更新为传入的新评分值,这样界面会根据新的评分重新渲染(因为状态改变触发重新构建)。

Star 组件

属性定义:

通过 @Prop 分别定义了 index(星星的索引,从 1 开始)、currentRating(当前的总评分,用于和星星索引对比判断是否点亮该星星)以及 onChange(评分更新的回调函数,点击星星时调用该函数传递对应的评分)。

界面构建(build 方法):

根据当前评分和星星的索引对比,判断该星星是否应该被点亮(即是否填充颜色),通过设置不同的图片资源(假设存在 filled_star.png 和 empty_star.png 图片资源)来呈现点亮和未点亮的状态,点亮的星星使用填充颜色的图片,未点亮的使用空心的图片。

为每个星星组件添加了点击事件,当用户点击星星时,调用 onChange 回调函数并传递该星星对应的评分(也就是星星的索引值),从而实现点击星星更新整体评分的功能。

你可以在其他组件或者页面中使用 RatingExample 组件,并传入初始评分值(可选)来展示和使用这个评级功能,比如:

import { RatingExample } from './RatingExample.ets';

@Entry
@Component
class MainPage extends Component {
    build() {
        return RatingExample({ initialRating: 3 });
    }
}

在上述示例中,初始展示的评级就是 3 星,用户可以点击星星来改变评分。当然,这只是一个基础的示例,你可以根据实际需求进一步扩展功能,比如添加半星评分、添加评分提交按钮将评分发送到服务器等。
在这里插入图片描述

标签:星星,index,ArkTS,鸿蒙,评分,评级,currentRating,RatingExample,组件
From: https://blog.csdn.net/chuanshixx/article/details/144244493

相关文章

  • 鸿蒙开发-ArkTS 中实现关系数据管理功能
    在ArkTS中使用SQLite数据库来实现简单关系数据功能的具体代码示例,模拟了一个“学生-课程”的多对多关系场景,即一个学生可以选修多门课程,一门课程也可以被多个学生选修。导入必要的模块import{SQLiteDatabase}from'@arkts/sqlite';初始化数据库letdb:SQL......
  • 【华为ICT大赛】ArkTS
    00.目录文章目录00.目录01.学习目标02.ArkTS语言基础类库概述03.并发3.1并发概述(掌握)3.2使用异步并发能力进行开发3.2.1异步并发概述3.2.2单次I/O任务开发指导3.3使用多线程并发能力进行开发3.3.1多线程并发概述3.3.2TaskPool和Worker的对比3.3.3CPU密集......
  • 中安证件OCR识别技术助力鸿蒙生态:智能化证件识别新体验
    在数字化和智能化的浪潮中,伴随国产化战略的深入推进,国产操作系统和软件生态的建设逐渐走向成熟。鸿蒙操作系统(HarmonyOSNext)作为华为推出的重要操作系统,凭借其开放、灵活和高效的特点,正在加速在多个领域的普及和应用。特别是在智能识别和人工智能技术的支持下,鸿蒙系统在各行各......
  • 手把手教你华为鸿蒙开发之第七节
    华为鸿蒙开发:数组和对象遍历及UI渲染详解引言在华为鸿蒙操作系统的开发中,数组和对象的遍历是基础且频繁的操作。无论是处理数据集合还是动态生成用户界面,都需要对数组和对象进行高效的遍历。本文将详细介绍如何在鸿蒙开发中使用for循环、for...of循环以及ForEach方法来遍......
  • 手把手教你华为鸿蒙开发之第九节
    华为鸿蒙开发:滚动视图Scroller与ForEach循环深度解析引言在移动应用开发中,滚动视图是展示大量内容的常用组件。华为鸿蒙操作系统提供了Scroller组件,允许开发者创建滚动视图。本文将通过DevEcoStudio详细介绍Scroller的基本使用、滚动控制以及如何结合ForEach循环动态生成滚......
  • 鸿蒙开发:如何上架一个元服务应用
    前言元服务,类似于微信的小程序,无需安装,即开即用,即用即走,它是基于鸿蒙系统,而非某个应用,也就是系统层的支持,可以说,这一点是非常的便捷,除此之外,元服务是支持独立上架、分发和运行的,能够独立实现业务闭环,可大幅度提升信息与服务的获取效率;特别是对于个人开发者,元服务,更加的包容,目......
  • 手把手教你华为鸿蒙开发之第八节
    华为鸿蒙开发:Swiper轮播组件详解与实践引言在现代用户界面设计中,轮播图是一种常见的组件,用于展示广告、新闻、产品等信息。华为鸿蒙操作系统提供了Swiper轮播组件,使得开发者能够轻松实现轮播效果。本文将通过DevEcoStudio详细介绍Swiper组件的基本使用、属性配置以及......
  • 在ArkTS中,如何优化布局以提高性能?
    大家好,我是V哥。在鸿蒙原生应用开发中,当一个复杂的界面加载数据或发生变化时,布局可能会发生调整,为了提高布局变化带来的性能问题,V哥在实际开发中,总结了一些优化技巧,来提高布局性能,笔记分享给大家。1.避免不必要的二次布局在Flex布局中,如果子组件的主轴尺寸总和不等于容器的......
  • 手把手教你华为鸿蒙开发之第六节
    华为鸿蒙开发:循环控制语句详解与示例引言在编程中,循环控制语句是处理重复任务的重要工具。在华为鸿蒙操作系统的开发中,我们可以使用while和for循环来实现代码的重复执行。本文将通过DevEcoStudio介绍鸿蒙开发中的循环控制语句,并提供丰富的示例来帮助理解。while循环w......
  • 纯血鸿蒙进程加速,混合app开发迎来又一波新机会
    时间不知不觉又来到了2024年最后一个月,又到了辞旧迎新,复盘今年,放眼明年的时候,开发行业也不例外。 纯血鸿蒙闭源操作酝酿和发酵了一年,终于在10月份发布了商用版本,迅速跟上的,还有11月份华为新产品全新操作系统的闪亮亮相登场。 纯血鸿蒙大潮流已无法阻挡。 鸿蒙......