HarmonyOS Next应用开发实战——商品详情页构建（part1）

HarmonyOS Next应用开发实战——商品详情页构建

文章概要

本文聚焦于HarmonyOS Next应用开发，详细介绍了商品详情页的构建过程。该页面具备商品信息展示、购物操作、滑动交互以及弹出框选择等功能，通过合理运用组件和状态管理，为用户提供了流畅的商品浏览和购买体验。

核心功能介绍

1. 组件样式扩展

通过@Extend装饰器对Text组件进行样式扩展，定义了addOrBuy方法，用于统一设置加入购物车和立即购买按钮的样式。

@Extend(Text) function addOrBuy(fColor: string | Color, bgColor?: string | Color){
  .fontColor(fColor)
  .fontSize(CommonConstants.S_FONT_SIZE)
  .width('50%')
  .padding({
    top: CommonConstants.MAIN_PADDING / 2,
    bottom: CommonConstants.MAIN_PADDING / 2
  })
  .textAlign(TextAlign.Center)
  .backgroundColor(bgColor)
}

2. 页脚构建

footer方法用于构建页面底部的购物操作区域，包含购物车图标、加入购物车和立即购买按钮，并为按钮绑定点击事件。

@Builder footer(addCar?: Function, buy?: Function){
  Row(){
    Badge({
      value: '0',
      style: { badgeSize: 14, badgeColor: Color.Red }
    }) {
      Image($r('app.media.shopping_cart'))
        .width(ShoppingMallConstants.ICON_WIDTH)
    }
    Blank()
    Row(){
      Text('加入购物车').addOrBuy(ShoppingMallConstants.CHECKED_COLOR)
        .onClick(()=>{
          addCar? addCar() : '';
        })
      Text('立即购买').addOrBuy(Color.White, ShoppingMallConstants.CHECKED_COLOR)
        .onClick(()=>{
          buy? buy() : '';
        })
    }
    .border({ width: 2, color: ShoppingMallConstants.CHECKED_COLOR })
    .width(220)
  }
  .width(CommonConstants.COLUMN_WIDTH)
  .padding({
    top: CommonConstants.MAIN_PADDING,
    bottom: CommonConstants.MAIN_PADDING  + this.bottom,
    left: CommonConstants.MAIN_PADDING,
    right: CommonConstants.MAIN_PADDING
  })
  .alignItems(VerticalAlign.Center)
}