目录

案例介绍

本篇文章将介绍如何使用FormLink组件构建产品详情页的基础布局结构，包括顶部导航栏、产品图片、基本信息等区域的布局实现。

代码实现

import router from '@ohos.router';

@Entry
@Component
struct ProductDetailDemo {
  // 产品数据
  private productInfo: any = {
    id: '12345',
    name: '智能手表 Pro',
    price: 1299,
    discount: 1099,
    sales: 2543,
    rating: 4.8,
    reviewCount: 356,
    specs: {
      color: '星空黑',
      size: '46mm',
      battery: '14天超长续航',
      waterproof: 'IP68防水',
      screen: '1.78英寸 AMOLED高清屏',
      connectivity: 'NFC、蓝牙5.2',
      sensors: '心率、血氧、睡眠监测'
    },
    description: '高清大屏，超长续航，全面健康监测，支持100+运动模式，智能语音助手，来电信息提醒。'
  };
  
  // 控制规格详情的展开状态
  @State isSpecsExpanded: boolean = false;

  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 }) {
          // 产品图片
          Stack() {
            Image($r('app.media.product_image'))
              .width('100%')
              .height(300)
              .objectFit(ImageFit.Cover)
            
            Text('官方自营')
              .fontSize(12)
              .backgroundColor('#FF5722')
              .fontColor('#FFFFFF')
              .padding({ left: 8, right: 8, top: 4, bottom: 4 })
              .borderRadius(4)
              .position({ x: 16, y: 16 })
          }
          .width('100%')
          .height(300)
          
          // 产品基本信息
          Column({ space: 8 }) {
            // 价格信息
            Row({ space: 8 }) {
              Text(`¥${this.productInfo.discount}`)
                .fontSize(24)
                .fontColor('#FF5722')
                .fontWeight(FontWeight.Bold)
              
              Text(`¥${this.productInfo.price}`)
                .fontSize(14)
                .fontColor('#999999')
                .decoration({ type: TextDecorationType.LineThrough })
            }
            
            // 产品名称
            Text(this.productInfo.name)
              .fontSize(18)
              .fontWeight(FontWeight.Medium)
            
            // 销量和评分
            Row() {
              Text(`销量 ${this.productInfo.sales}`)
                .fontSize(14)
                .fontColor('#666666')
              
              Divider()
                .vertical(true)
                .height(14)
                .margin({ left: 8, right: 8 })
                .color('#DDDDDD')
              
              Text(`评分 ${this.productInfo.rating}`)
                .fontSize(14)
                .fontColor('#666666')
              
              Divider()
                .vertical(true)
                .height(14)
                .margin({ left: 8, right: 8 })
                .color('#DDDDDD')
              
              Text(`评价 ${this.productInfo.reviewCount}`)
                .fontSize(14)
                .fontColor('#666666')
            }
            .margin({ top: 4 })
          }
          .width('100%')
          .padding(16)
          .backgroundColor('#FFFFFF')
          .borderRadius(8)
        }
        .width('100%')
        .padding(16)
      }
      .width('100%')
      .layoutWeight(1)
      .backgroundColor('#F5F5F5')
    }
    .width('100%')
    .height('100%')
  }
}

代码详解

数据结构设计

1. 产品信息对象：

   • 包含基本信息：ID、名称、价格等
   • 包含规格信息：颜色、尺寸、配置等
   • 包含统计信息：销量、评分、评价数

2. 状态变量：

   • isSpecsExpanded：控制规格详情的展开状态

页面布局结构

1. 顶部导航栏：

   • 使用Row布局，包含返回按钮、标题和功能按钮
   • 固定高度和背景色
   • 合理的内边距和对齐方式

2. 产品图片区域：

   • 使用Stack布局叠加显示标签
   • 图片适配和裁剪处理
   • 官方自营标签定位显示

3. 产品基本信息：

   • 价格显示：当前价格和原价
   • 产品名称：突出显示
   • 销量和评分：使用分隔线布局

样式处理

1. 颜色规范：

   • 主色调：#FF5722（橙色）
   • 文本颜色：多级灰度
   • 背景色：白色和浅灰

2. 间距规范：

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

3. 字体规范：

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

总结

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

1. 设计了完整的数据结构
2. 实现了基础页面框架
3. 完成了主要信息展示
4. 建立了统一的样式规范

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