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

最新推荐文章于 2024-09-22 19:55:21 发布

代码中的爱马仕

最新推荐文章于 2024-09-22 19:55:21 发布

阅读量966

点赞数 20

分类专栏： OpenHarmony 鸿蒙 HarmonyOS 文章标签：前端数据库 harmonyos 华为 android 鸿蒙鸿蒙系统

本文链接：https://blog.csdn.net/DMZDAMS/article/details/140272374

版权

鸿蒙同时被 3 个专栏收录

187 篇文章 4 订阅

订阅专栏

OpenHarmony

185 篇文章 0 订阅

订阅专栏

HarmonyOS

181 篇文章 2 订阅

订阅专栏

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:'苹果', poll: '12080'},
   {rank:'2', type:'葡萄', poll: '10320'},
   {rank:'3', type:'西瓜', poll: '9801'},
   {rank:'4', type:'香蕉', poll: '8431'},
   {rank:'5', type:'菠萝', poll: '7546'},
   {rank:'6', type:'榴莲', poll: '7431'},
   {rank:'7', type:'红提', poll: '7187'},
   {rank:'8', type:'梨子', poll: '7003'},
   {rank:'9', type:'杨桃', poll: '6794'},
   {rank:'10', type:'番石榴', poll: '6721'}
  ]
 @State isChange: boolean = false;
 index?: number;


 onBackPress() {
  if (this.isShowToast()) {
   prompt.showToast({
    message: '再按一次退出程序',
    duration: this.TIME
    });
   this.clickBackTimeRecord = new Date().getTime();
   return true;
   }
  return false;
  }


 isShowToast(): boolean {
  return new Date().getTime() - this.clickBackTimeRecord > this.APP_EXIT_INTERVAL;
  }


 build() {
  //根组件
  Column() {
   //顶部
   Row() {
    Row() {
     Image($r('app.media.back'))
       .height(21)
       .width(21)
       .margin({ right: 18 })
       .onClick(() => {
       AlertDialog.show(
         {
         title: '提示消息',
         message: '确定退出吗？',
         autoCancel: true,
         alignment: DialogAlignment.Bottom,
         gridCount: 4,
         offset: { dx: 0, dy: -20},
         primaryButton: {
          value: '取消',
          action: () => {
           //取消操作
           }
          },
         secondaryButton: {
          value: '确定',
          action: () => {
           let handler = getContext(this) as AppContext.UIAbilityContext;
           handler.terminateSelf();
           }
          },
         cancel: () => {
          //关闭操作
          }
         }
        )
       })
     Text('水果排行榜')
       .fontSize(20)
       .fontColor('#87CEEB')
     }
     .width('50%')
     .height('50%')
     .justifyContent(FlexAlign.Start)


    Row() {
     Image($r('app.media.loading'))
       .height(22)
       .width(22)
       .onClick(() => {
       AlertDialog.show(
         {
         title: '提示消息',
         message: '确定刷新操作？',
         autoCancel: true,
         alignment: DialogAlignment.Bottom,
         gridCount: 4,
         offset: { dx: 0, dy: -20},
         primaryButton: {
          value: '取消',
          action: () => {
           //取消操作
           }
          },
         secondaryButton: {
          value: '确定',
          action: () => {
           this.rankList.reverse()
           }
          },
         cancel: () => {
          //关闭操作
          }
         }
        )
       })
     }
     .width('50%')
     .height('100%')
     .justifyContent(FlexAlign.End)
    }
    .width('100%')
    .padding({ left: 26,
    right: 26 })
    .margin({ top: 10 })
    .height(47)
    .justifyContent(FlexAlign.SpaceAround)


   //榜头
   Row() {
    Text('排名')
      .fontSize(14)
      .width('30%')
      .fontWeight(400)
      .fontColor('#87CEEB')
     Text('类型')
      .fontSize(14)
      .width('30%')
      .fontWeight(400)
       .fontColor('#87CEEB')
    Text('得票数')
      .fontSize(14)
      .width('30%')
      .fontWeight(400)
      .fontColor('#87CEEB')
    }
    .width('90%')
    .padding({ left:15, right:15})
    .margin({ top:20, bottom:15 })


   //列表
   Row() {


    List() {
     ForEach(this.rankList, (item) => {
      ListItem() {
       Row() {
        Text(item.rank)
          .textStyleLs()
          .fontColor(this.isChange ? '#007DFF' : '#87CEEB')
        Text(item.type)
          .textStyleLs()
          .fontColor(this.isChange ? '#007DFF' : '#87CEEB')
        Text(item.poll)
          .textStyleLs()
          .fontColor(this.isChange ? '#007DFF' : '#87CEEB')
        }
        .justifyContent(FlexAlign.SpaceAround)
        .margin({ top: 20, bottom: 20, left: 33})
       }
      })
     }
     .margin({ top: -105})
    }
    .height('90%')
    .width('100%')
    .onClick(() => {
    this.isChange = !this.isChange;
    })
   }
   .width('100%')
   .height('100%')
   .backgroundColor('#E0FFFF')
  }


 @Builder CircleText(index: number) {
  Row() {
   Text(this.index?.toString())
     .fontWeight(400)
     .fontSize(14)
     .fontColor(Color.White);
   }
   .justifyContent(FlexAlign.Center)
   .borderRadius(24)
   .size({ width: 24,
   height: 24 })
   .backgroundColor('#007dff')
  }


 isRenderCircleText(): boolean {
  // Just render the element before the fourth in the list.
  return this.index === 1 || this.index === 2 || this.index === 3;
  }
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

点击领取→【纯血版鸿蒙全套最新学习资料】（安全链接，放心点击）希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

鸿蒙（HarmonyOS NEXT）最新学习路线