目录

案例介绍

本篇文章将介绍如何在产品详情页中使用FormLink组件实现规格信息展开收起和评价区域的交互功能，提升产品信息的展示效果和用户体验。

代码实现

import router from '@ohos.router';

@Entry
@Component
struct ProductDetailDemo {
  @State isSpecsExpanded: boolean = false;
  private productInfo: any = {
    // 产品信息定义省略...
  };

  build() {
    Column() {
      // 基础布局结构省略...
      
      // 产品规格信息
      Column() {
        Row() {
          Text('规格')
            .fontSize(16)
            .fontWeight(FontWeight.Medium)
          
          Blank()
          
          FormLink() {
            Text('查看更多规格')
              .fontSize(14)
              .fontColor('#2196F3')
          }
          .onClick(() => {
            this.isSpecsExpanded = !this.isSpecsExpanded;
            console.info(`规格详情展开状态: ${this.isSpecsExpanded}`);
          })
        }
        .width('100%')
        .padding({ top: 12, bottom: 12 })
        
        // 基本规格信息
        Grid() {
          GridItem() {
            this.buildSpecItem('颜色', this.productInfo.specs.color)
          }
          
          GridItem() {
            this.buildSpecItem('尺寸', this.productInfo.specs.size)
          }
          
          GridItem() {
            this.buildSpecItem('电池', this.productInfo.specs.battery)
          }
          
          GridItem() {
            this.buildSpecItem('防水', this.productInfo.specs.waterproof)
          }
        }
        .columnsTemplate('1fr 1fr')
        .rowsGap(12)
        .columnsGap(16)
        
        // 展开后显示更多规格
        if (this.isSpecsExpanded) {
          Grid() {
            GridItem() {
              this.buildSpecItem('屏幕', this.productInfo.specs.screen)
            }
            
            GridItem() {
              this.buildSpecItem('连接', this.productInfo.specs.connectivity)
            }
            
            GridItem() {
              this.buildSpecItem('传感器', this.productInfo.specs.sensors)
            }
          }
          .columnsTemplate('1fr 1fr')
          .rowsGap(12)
          .columnsGap(16)
          .margin({ top: 12 })
        }
      }
      .width('100%')
      .padding(16)
      .backgroundColor('#FFFFFF')
      .borderRadius(8)
      
      // 产品评价
      Column() {
        Row() {
          Text('用户评价')
            .fontSize(16)
            .fontWeight(FontWeight.Medium)
          
          Blank()
          
          FormLink() {
            Row() {
              Text('查看全部评价')
                .fontSize(14)
                .fontColor('#2196F3')
              
              Image($r('app.media.ic_arrow_right'))
                .width(16)
                .height(16)
                .margin({ left: 4 })
                .fillColor('#2196F3')
            }
          }
          .onClick(() => {
            console.info('点击了查看全部评价');
            router.pushUrl({ url: 'pages/ReviewList', params: { productId: this.productInfo.id } });
          })
        }
        .width('100%')
        .padding({ top: 12, bottom: 12 })
        
        // 评价预览
        Column({ space: 16 }) {
          this.buildReviewItem({
            avatar: $r('app.media.avatar1'),
            username: '用户123456',
            rating: 5,
            content: '质量非常好，续航能力强，功能齐全，很满意这次购买！',
            date: '2023-09-15'
          })
          
          Divider().color('#EEEEEE').width('100%')
          
          this.buildReviewItem({
            avatar: $r('app.media.avatar2'),
            username: '智能穿戴爱好者',
            rating: 4,
            content: '屏幕显示效果很棒，操作流畅，就是充电器有点小...',
            date: '2023-09-10'
          })
        }
        .width('100%')
      }
      .width('100%')
      .padding(16)
      .backgroundColor('#FFFFFF')
      .borderRadius(8)
    }
  }

  @Builder
  buildSpecItem(title: string, value: string) {
    Row() {
      Text(title)
        .fontSize(14)
        .fontColor('#666666')
      
      Text(value)
        .fontSize(14)
        .fontColor('#333333')
        .margin({ left: 8 })
    }
    .width('100%')
    .alignItems(VerticalAlign.Center)
  }

  @Builder
  buildReviewItem(review: any) {
    Column({ space: 8 }) {
      Row() {
        Image(review.avatar)
          .width(32)
          .height(32)
          .borderRadius(16)
        
        Column({ space: 4 }) {
          Text(review.username)
            .fontSize(14)
            .fontWeight(FontWeight.Medium)
          
          Row() {
            ForEach([1, 2, 3, 4, 5], (item) => {
              Image($r('app.media.ic_star'))
                .width(16)
                .height(16)
                .fillColor(item <= review.rating ? '#FFC107' : '#DDDDDD')
                .margin({ right: 2 })
            })
            
            Text(review.date)
              .fontSize(12)
              .fontColor('#999999')
              .margin({ left: 8 })
          }
        }
        .alignItems(HorizontalAlign.Start)
        .margin({ left: 12 })
      }
      
      Text(review.content)
        .fontSize(14)
        .fontColor('#333333')
        .margin({ top: 8 })
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }
}

代码详解

规格信息展示

1. 展开收起控制：

   • 使用isSpecsExpanded状态控制显示
   • FormLink组件实现展开收起切换
   • 条件渲染显示更多规格信息

2. 规格项布局：

   • 使用Grid组件实现两列布局
   • buildSpecItem方法统一构建规格项
   • 合理的间距和对齐方式

评价区域实现

1. 评价标题栏：

   • 标题和查看全部按钮布局
   • FormLink实现评价列表跳转
   • 添加箭头图标增强视觉效果

2. 评价项展示：

   • buildReviewItem方法构建评价项
   • 用户头像和信息布局
   • 星级评分的动态显示
   • 评价内容和时间的展示

辅助方法实现

1. buildSpecItem方法：

   • 统一的规格项布局
   • 标题和值的样式处理
   • 垂直居中对齐

2. buildReviewItem方法：

   • 评价项的完整布局
   • 用户信息区域布局
   • 星级评分的动态渲染
   • 评价内容的样式处理

总结

本篇文章展示了如何实现产品详情页的交互功能：

1. 实现了规格信息的展开收起
2. 完成了评价区域的布局和跳转
3. 优化了视觉效果和交互体验
4. 实现了评价项的动态展示

这些交互功能的实现，使产品信息展示更加灵活和友好。