HarmonyOS Next 应用首页界面开发实践（一）

HarmonyOS Next 应用首页界面开发实践

概述

在 HarmonyOS Next 应用开发中，构建一个功能丰富且美观的首页界面是常见需求。下面将介绍如何开发一个包含搜索、分类、轮播图、活动标题以及商品列表展示等功能的首页界面。

核心代码功能及对应代码段

1. 组件状态管理

使用 @State 和 @StorageProp 装饰器管理组件的状态，包括当前断点、商品列表、标题索引等。

@Component
export struct Home {
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';
  @State commodityList: Commodity[] = [];
  @State titleIndex: number = 0;
  @State activityTitleIndex: number = 0;
  private localDataManger: LocalDataManager = LocalDataManager.instance();
  @State codeValue: string = ''
  @State uri: Resource | string | undefined = undefined;
  @Consume('pageInfo') pageInfos: NavPathStack

  pictureRecognize: PictureRecognize = new PictureRecognize()

  aboutToAppear() {
    this.commodityList = this.localDataManger.queryCommodityList();
  }
}

• @StorageProp('currentBreakpoint')：用于存储和获取当前的断点信息。
• @State 装饰的变量：用于管理组件内部的状态，如商品列表、标题索引等。
• aboutToAppear 方法：在组件即将显示时，从本地数据管理器中查询商品列表并赋值给 commodityList。

2. 搜索标题构建

使用 @Builder 装饰器构建搜索标题组件，包含搜索图标、轮播搜索提示词和相机图标，点击相机图标可跳转到相机页面，点击搜索区域可跳转到搜索页面。

@Builder
SearchTitle() {
  Column() {
    Flex({ justifyContent: FlexAlign.SpaceBetween }) {
      Image($r('app.media.ic_eshop'))
        .height(StyleConstants.FULL_HEIGHT)
        .aspectRatio(1)
      Row({space: 10}) {
        Image($r('app.media.ic_camera_white'))
          .height(36)
          .width(36)
          .onClick(() => {
            this.pageInfos.pushPath({name: 'CameraPage'})
          })
      }
    }
    .height($r('app.float.vp_twenty_four'))
    .width(StyleConstants.FULL_WIDTH)
    .margin({ bottom: $r('app.float.vp_eight') })

    Row() {
      Image($r('app.media.ic_search'))
        .width($r('app.float.vp_twenty'))
        .height($r('app.float.vp_twenty'))
        .margin({
          left: $r('app.float.vp_twelve'),
          right: $r('app.float.vp_eight')
        })
      Swiper() {
        ForEach(searchSwiper, (item: Resource) => {
          Column() {
            Text(item)
              .fontSize($r('app.float.small_font_size'))
              .fontColor(Color.Black)
          }
          .alignItems(HorizontalAlign.Start)
        }, (item: Resource) => JSON.stringify(item))
      }
      .autoPlay(true)
      .loop(true)
      .vertical(true)
      .indicator(false)
    }
    .onClick(() => {
      this.pageInfos.pushPath({name: 'SearchPage'})
    })
    .height($r('app.float.search_swiper_height'))
    .width(StyleConstants.FULL_WIDTH)
    .borderRadius($r('app.float.vp_twenty'))
    .backgroundColor(Color.White)
  }
  .width(StyleConstants.FULL_WIDTH)
  .padding({ top: $r('app.float.vp_twelve'), bottom: $r('app.float.vp_twelve') })
}

• Image($r('app.media.ic_camera_white'))：相机图标，点击触发 onClick 事件，跳转到相机页面。
• Swiper 组件：实现搜索提示词的轮播效果。
• Row 组件：点击触发 onClick 事件，跳转到搜索页面。