HarmonyOS开发学习：项目案例实战 - 水果排行榜

最新推荐文章于 2025-08-18 14:56:35 发布

原创

最新推荐文章于 2025-08-18 14:56:35 发布 · 1.1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #数据库 #harmonyos #华为 #android #鸿蒙 #鸿蒙系统

Road

一、所需知识

完成组件学习

渲染控制语法
组件状态管理装饰器和@Builder装饰器
组件生命周期函数

二、效果图

三、详细知识点内容

1. 渲染控制语法：

条件渲染：使用if/else进行条件渲染。
循环渲染：开发框架提供循环渲染（ForEach组件）来迭代数组，并为每个数组项创建相应的组件。

2.组件状态管理装饰器和@Builder装饰器：

组件状态管理装饰器用来管理组件中的状态，它们分别是：@State、@Prop、@Link。

3.组件生命周期函数：

自定义组件的生命周期函数用于通知用户该自定义组件的生命周期，这些回调函数是私有的，在运行时由开发框架在特定的时间进行调用，不能从应用程序中手动调用这些回调函数。

四、完整代码



@Extend(Text) function textStyleLs() {    //列表统一样式
  .width('26%')
  .fontWeight(500)
  .fontSize(16)
}
import prompt from '@ohos.promptAction';
import AppContext from '@ohos.app.ability.common';


@Entry
@Component
struct FruitRank {
 @State TIME:number = 1000
 private clickBackTimeRecord: number = 0;
 @State APP_EXIT_INTERVAL: number = 4500;
 @State rankList: any[] = [
   {rank:'1', type:'苹果