目录

案例介绍

在电商应用中，商品详情页的展示区是用户了解商品的第一印象，包含商品图片轮播和基本信息展示。本篇文章将详细讲解如何使用HarmonyOS NEXT的Column组件构建一个专业的商品详情页展示区，实现商品图片轮播和基本信息的垂直布局展示。

代码实现

@Entry
@Component
struct ProductDetail {
  // 商品信息
  @State product: {
    title: string,
    price: number,
    originalPrice: number,
    sales: number,
    description: string,
    specs: Array<{
      name: string,
      options: Array<string>
    }>
  } = {
    title: '2024新款智能手表',
    price: 999.00,
    originalPrice: 1299.00,
    sales: 1580,
    description: '高清大屏，续航持久，智能监测，运动计步',
    specs: [
      {
        name: '颜色',
        options: ['曜石黑', '星空银', '玫瑰金']
      },
      {
        name: '尺寸',
        options: ['41mm', '45mm']
      }
    ]
  }

  build() {
    Column() {
      // 商品图片轮播
      Swiper() {
        ForEach([1, 2, 3], (item) => {
          Image($r(`app.media.product_${item}`))
            .width('100%')
            .height(300)
            .objectFit(ImageFit.Cover)
        })
      }
      .width('100%')
      .height(300)
      .autoPlay(true)

      // 商品基本信息
      Column() {
        // 价格区域
        Row() {
          Text(`￥${this.product.price.toFixed(2)}`)
            .fontSize(24)
            .fontWeight(FontWeight.Bold)
            .fontColor('#FF0000')
          Text(`￥${this.product.originalPrice.toFixed(2)}`)
            .fontSize(14)
            .fontColor('#999999')
            .decoration({ type: TextDecorationType.LineThrough })
            .margin({ left: 10 })
        }
        .margin({ top: 15 })

        // 标题
        Text(this.product.title)
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
          .margin({ top: 10 })

        // 销量
        Text(`销量 ${this.product.sales}`)
          .fontSize(14)
          .fontColor('#999999')
          .margin({ top: 5 })

        // 商品描述
        Text(this.product.description)
          .fontSize(14)
          .margin({ top: 10 })
          .fontColor('#666666')
      }
      .width('100%')
      .padding(15)
      .backgroundColor(Color.White)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}

代码详解

数据结构设计

首先，我们定义了商品信息的数据结构：

@State product: {
  title: string,         // 商品标题
  price: number,         // 当前价格
  originalPrice: number, // 原价
  sales: number,         // 销量
  description: string,   // 商品描述
  specs: Array<{         // 规格数组
    name: string,        // 规格名称
    options: Array<string> // 规格选项
  }>
}

使用@State装饰器将商品信息定义为状态变量，当数据发生变化时，UI会自动更新。

图片轮播实现

Swiper() {
  ForEach([1, 2, 3], (item) => {
    Image($r(`app.media.product_${item}`))
      .width('100%')
      .height(300)
      .objectFit(ImageFit.Cover)
  })
}
.width('100%')
.height(300)
.autoPlay(true)

1. Swiper组件：用于实现图片轮播效果

   • width('100%')和height(300)：设置轮播区域的宽高
   • autoPlay(true)：启用自动播放功能

2. ForEach循环：动态生成轮播项

   • 遍历数组[1, 2, 3]，为每个元素创建一个Image组件
   • $r()：资源引用函数，用于加载应用资源目录中的图片
   • objectFit(ImageFit.Cover)：设置图片填充模式为覆盖，确保图片完全覆盖显示区域

商品信息展示

Column() {
  // 价格区域
  Row() {
    Text(`￥${this.product.price.toFixed(2)}`)
      .fontSize(24)
      .fontWeight(FontWeight.Bold)
      .fontColor('#FF0000')
    Text(`￥${this.product.originalPrice.toFixed(2)}`)
      .fontSize(14)
      .fontColor('#999999')
      .decoration({ type: TextDecorationType.LineThrough })
      .margin({ left: 10 })
  }
  .margin({ top: 15 })

  // 标题
  Text(this.product.title)
    .fontSize(18)
    .fontWeight(FontWeight.Medium)
    .margin({ top: 10 })

  // 销量
  Text(`销量 ${this.product.sales}`)
    .fontSize(14)
    .fontColor('#999999')
    .margin({ top: 5 })

  // 商品描述
  Text(this.product.description)
    .fontSize(14)
    .margin({ top: 10 })
    .fontColor('#666666')
}
.width('100%')
.padding(15)
.backgroundColor(Color.White)

1. 价格区域：使用Row组件实现水平布局

   • 当前价格：使用较大字体(24)和粗体显示，颜色为红色(#FF0000)
   • 原价：使用较小字体(14)，颜色为灰色(#999999)，添加删除线效果
   • toFixed(2)：保留两位小数，确保价格显示格式统一

2. 商品标题：

   • 字体大小18，中等粗细，顶部外边距10像素

3. 销量信息：

   • 使用灰色(#999999)显示，字体大小14，顶部外边距5像素

4. 商品描述：

   • 深灰色(#666666)显示，字体大小14，顶部外边距10像素

5. 整体样式：

   • 宽度100%，内边距15像素，白色背景
   • 通过内边距(padding)控制内容与容器边缘的距离，提升视觉体验

总结

本篇文章详细讲解了如何使用HarmonyOS NEXT的Column组件构建商品详情页的展示区部分。通过合理使用Column、Row、Swiper等组件，我们实现了商品图片轮播和基本信息的垂直布局展示。

关键实现点：

1. 数据结构设计：使用@State装饰器定义商品信息，支持UI自动更新
2. 图片轮播：使用Swiper组件和ForEach循环实现动态图片轮播
3. 信息布局：使用嵌套的Column和Row组件实现复杂布局
4. 样式处理：通过字体大小、颜色、边距等属性设置，实现专业的视觉效果