目录

案例介绍

本篇文章将介绍如何使用FormLink组件构建商品详情页的基础布局，包括顶部导航栏、图片轮播和基本信息展示等功能的实现。

代码实现

import router from '@ohos.router';

@Entry
@Component
struct ProductDetailDemo {
  // 产品信息
  private productInfo = {
    id: '12345',
    name: '智能手表 Pro',
    price: 1299,
    originalPrice: 1599,
    sales: 2543,
    rating: 4.8,
    commentCount: 356,
    images: [
      '/common/images/product1.jpg',
      '/common/images/product2.jpg',
      '/common/images/product3.jpg'
    ],
    colors: ['黑色', '银色', '金色'],
    sizes: ['42mm', '46mm'],
    features: [
      '高清AMOLED显示屏',
      '心率监测',
      '血氧监测',
      '睡眠监测',
      '50米防水',
      '长达14天续航'
    ],
    description: '这是一款功能强大的智能手表，配备高清AMOLED显示屏，支持心率、血氧、睡眠监测等多种健康功能，同时具备50米防水和长达14天的超长续航。'
  }
  
  // 当前选中的颜色和尺寸
  @State selectedColor: string = '黑色'
  @State selectedSize: string = '42mm'

  build() {
    Column() {
      // 顶部导航栏
      Row() {
        Image($r('app.media.ic_back'))
          .width(24)
          .height(24)
          .margin({ right: 16 })
          .onClick(() => {
            router.back();
          })
        
        Text('产品详情')
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
        
        Blank()
        
        Image($r('app.media.ic_share'))
          .width(24)
          .height(24)
          .margin({ right: 16 })
        
        Image($r('app.media.ic_more'))
          .width(24)
          .height(24)
      }
      .width('100%')
      .height(56)
      .padding({ left: 16, right: 16 })
      .backgroundColor('#FFFFFF')
      
      // 产品内容区域（可滚动）
      Scroll() {
        Column({ space: 16 }) {
          // 产品图片轮播
          Swiper() {
            ForEach(this.productInfo.images, (image: string) => {
              Image(image)
                .width('100%')
                .height(300)
                .objectFit(ImageFit.Cover)
            })
          }
          .width('100%')
          .height(300)
          .autoPlay(true)
          .interval(3000)
          .indicatorStyle({
            selectedColor: '#2196F3',
            color: '#CCCCCC',
            bottom: 16
          })
          
          // 产品基本信息
          Column({ space: 8 }) {
            // 价格信息
            Row({ space: 8 }) {
              Text(`￥${this.productInfo.price}`)
                .fontSize(24)
                .fontWeight(FontWeight.Bold)
                .fontColor('#E53935')
              
              Text(`￥${this.productInfo.originalPrice}`)
                .fontSize(14)
                .fontColor('#999999')
                .decoration({ type: TextDecorationType.LineThrough })
            }
            
            // 产品名称
            Text(this.productInfo.name)
              .fontSize(18)
              .fontWeight(FontWeight.Medium)
            
            // 销量和评分
            Row({ space: 16 }) {
              Text(`销量 ${this.productInfo.sales}`)
                .fontSize(14)
                .fontColor('#666666')
              
              Text(`评分 ${this.productInfo.rating}`)
                .fontSize(14)
                .fontColor('#666666')
              
              Text(`评论 ${this.productInfo.commentCount}`)
                .fontSize(14)
                .fontColor('#666666')
            }
          }
          .width('100%')
          .padding(16)
          .backgroundColor('#FFFFFF')
        }
      }
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
  }
}

代码详解

数据结构设计

1. 产品信息对象：

   • 基本信息：ID、名称、价格等
   • 图片数组：轮播展示的产品图片
   • 规格信息：颜色、尺寸选项
   • 产品特点：功能特性列表

2. 状态变量：

   • selectedColor：当前选中的颜色
   • selectedSize：当前选中的尺寸

页面布局结构

1. 顶部导航栏：

   • 返回按钮和标题
   • 分享和更多功能按钮
   • 固定高度和背景色

2. 图片轮播：

   • 使用Swiper组件实现
   • 自动播放和切换间隔
   • 自定义指示器样式

3. 基本信息区域：

   • 价格显示：当前价格和原价
   • 产品名称：突出显示
   • 销量和评分信息

样式处理

1. 颜色规范：

   • 主色调：#2196F3（蓝色）
   • 价格颜色：#E53935（红色）
   • 文本颜色：多级灰度

2. 间距规范：

   • 外边距：16px
   • 内边距：16px
   • 元素间距：8px或16px

3. 字体规范：

   • 价格：24px Bold
   • 标题：18px Medium
   • 普通文本：14px

总结

本篇文章展示了如何构建商品详情页的基础布局：

1. 设计了完整的数据结构
2. 实现了顶部导航栏
3. 完成了图片轮播功能
4. 展示了基本商品信息

这个基础布局为后续添加更多交互功能提供了良好的结构支持。