《农物购》app开发技术分享《七》-- HarmonyOS 鸿蒙Next 商品详情

《农物购》app开发技术分享《七》-- HarmonyOS 鸿蒙Next 商品详情 在上一节我们完善了首页底部商品列表功能，实现了商品的展示，现在我们的应用首页已经变得比较丰富了，现在我们要实现的功能是，当我们点击列表的时候我们要跳转到商品详情页面，展示我们的商品详情给用户查看，我们先找一个页面来看一下我们要实现的样式

可以看到商品详情页面，展示的是一张商品的大图，商品名称和商品价格，销售数量这些信息，同时商品详情页面的底部我们还需要添加一个添加购物车的按钮去给用户。

现在让我们来实现一下

首先我们要新建一个页面 ProductDetailsPage 用来展示商品的详情，我们的商品详情要跟列表对应，所以在列表的条目中我们需要把数据传递过去。

import { router } from '@kit.ArkUI';

@Entry
@Component
struct ProductDetailsPage {
  @State data: ESObject= null!;
  @State message: string = 'Hello World';

  aboutToAppear(): void {
    this.data= router.getParams() as ESObject
  }
  build() {
    Column() {
      Column(){
        Text("商品详情")
          .width('100%')
          .height(40)
          .fontSize(22)
          .textAlign(TextAlign.Center)
        Image(this.data.img)
          .height(200)
          .width('100%')
        Row(){
          Text(this.data.price+"￥")
            .fontSize(33)
            .fontColor(Color.Red)
            .fontWeight(FontWeight.Bold)

          Blank()
          Text("已售出"+this.data.volume+"份")
            .fontSize(14)
            .fontColor(Color.Gray)
            .fontWeight(FontWeight.Bold)
        }
        .margin({top:20})
        .width('100%')
        Text(this.data.title)
          .fontSize(22)
          .fontWeight(FontWeight.Bold)
      }
      .alignItems(HorizontalAlign.Start)

      Blank()
      Row(){

        Text("加入购物车")
          .width(100)
          .height(35)
          .backgroundColor(Color.Red)
          .borderRadius({topLeft:10,bottomLeft:10})
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)

        Text("立即购买")
          .width(100)
          .height(35)
          .backgroundColor(Color.Orange)
          .fontColor(Color.White)
          .borderRadius({topRight:10,bottomRight:10})
          .textAlign(TextAlign.Center)

      }.width('100%')
      .padding(10)
      .justifyContent(FlexAlign.End)

    }
    .height('100%')
    .width('100%')
  }
}

执行代码后可以看到页面展示如下

现在我们已经完成了商品详情页面的简单展示，后续只需要继续完善相应的内容就可以了，下一节我们将开始完善底部状态栏的分类模块