目录

案例介绍

本篇文章将介绍如何在商品详情页中使用FormLink组件实现规格选择和评价区域的交互功能，包括规格展开收起、规格选择和评价展示等功能的实现。

代码实现

import router from '@ohos.router';

@Entry
@Component
struct ProductDetailDemo {
  @State isSpecsExpanded: boolean = false;
  @State selectedColor: string = '黑色';
  @State selectedSize: string = '42mm';
  
  private productInfo = {
    // 产品信息定义省略...
  };

  build() {
    Column() {
      // 规格选择区域
      Column({ space: 16 }) {
        // 规格标题
        Row() {
          Text('规格')
            .fontSize(16)
            .fontWeight(FontWeight.Medium)
          
          Blank()
          
          // 查看更多规格链接
          FormLink() {
            Row({ space: 4 }) {
              Text('查看更多规格')
                .fontSize(14)
                .fontColor('#2196F3')
              
              Image($r('app.media.ic_arrow_right'))
                .width(16)
                .height(16)
                .fillColor('#2196F3')
            }
          }
          .onClick(() => {
            this.isSpecsExpanded = !this.isSpecsExpanded;
            console.info(`规格详情${this.isSpecsExpanded ? '展开' : '收起'}`);
          })
        }
        .width('100%')
        
        // 颜色选择
        Column({ space: 8 }) {
          Text('颜色')
            .fontSize(14)
            .fontColor('#666666')
          
          Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Start }) {
            ForEach(this.productInfo.colors, (color: string) => {
              Text(color)
                .fontSize(14)
                .padding(8)
                .borderRadius(4)
                .backgroundColor(this.selectedColor === color ? '#E3F2FD' : '#F5F5F5')
                .borderWidth(this.selectedColor === color ? 1 : 0)
                .borderColor('#2196F3')
                .fontColor(this.selectedColor === color ? '#2196F3' : '#333333')
                .margin({ right: 8, bottom: 8 })
                .onClick(() => {
                  this.selectedColor = color;
                })
            })
          }
        }
        
        // 尺寸选择
        Column({ space: 8 }) {
          Text('尺寸')
            .fontSize(14)
            .fontColor('#666666')
          
          Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Start }) {
            ForEach(this.productInfo.sizes, (size: string) => {
              Text(size)
                .fontSize(14)
                .padding(8)
                .borderRadius(4)
                .backgroundColor(this.selectedSize === size ? '#E3F2FD' : '#F5F5F5')
                .borderWidth(this.selectedSize === size ? 1 : 0)
                .borderColor('#2196F3')
                .fontColor(this.selectedSize === size ? '#2196F3' : '#333333')
                .margin({ right: 8, bottom: 8 })
                .onClick(() => {
                  this.selectedSize = size;
                })
            })
          }
        }
        
        // 展开的规格详情
        if (this.isSpecsExpanded) {
          Column({ space: 8 }) {
            Text('产品特点')
              .fontSize(14)
              .fontColor('#666666')
            
            List() {
              ForEach(this.productInfo.features, (feature: string) => {
                ListItem() {
                  Row({ space: 8 }) {
                    Text('•')
                      .fontSize(14)
                      .fontColor('#333333')
                    
                    Text(feature)
                      .fontSize(14)
                      .fontColor('#333333')
                  }
                  .alignItems(VerticalAlign.Top)
                  .margin({ bottom: 4 })
                }
              })
            }
            .divider({ strokeWidth: 0 })
          }
        }
      }
      .width('100%')
      .padding(16)
      .backgroundColor('#FFFFFF')
      
      // 产品评价
      Column({ space: 12 }) {
        // 评价标题
        Row() {
          Text('用户评价')
            .fontSize(16)
            .fontWeight(FontWeight.Medium)
          
          Blank()
          
          // 查看全部评论链接
          FormLink() {
            Row({ space: 4 }) {
              Text(`查看全部 ${this.productInfo.commentCount} 条评论`)
                .fontSize(14)
                .fontColor('#2196F3')
              
              Image($r('app.media.ic_arrow_right'))
                .width(16)
                .height(16)
                .fillColor('#2196F3')
            }
          }
          .onClick(() => {
            console.info('查看全部评论');
            router.pushUrl({
              url: 'pages/ProductComments',
              params: {
                productId: this.productInfo.id
              }
            });
          })
        }
        .width('100%')
        
        // 评分统计
        Row({ space: 8 }) {
          Text(`${this.productInfo.rating}`)
            .fontSize(24)
            .fontWeight(FontWeight.Bold)
            .fontColor('#FF9800')
          
          Column({ space: 4 }) {
            Row() {
              ForEach([1, 2, 3, 4, 5], (star: number) => {
                Image($r('app.media.ic_star'))
                  .width(16)
                  .height(16)
                  .fillColor(star <= Math.floor(this.productInfo.rating) ? '#FF9800' : '#CCCCCC')
                  .margin({ right: 2 })
              })
            }
            
            Text(`${this.productInfo.commentCount}条评论`)
              .fontSize(12)
              .fontColor('#999999')
          }
        }
        .margin({ top: 8, bottom: 16 })
      }
      .width('100%')
      .padding(16)
      .backgroundColor('#FFFFFF')
    }
  }
}

代码详解

规格选择实现

1. 规格展开收起：

   • 使用isSpecsExpanded状态控制
   • FormLink实现展开收起切换
   • 箭头图标提示交互状态

2. 颜色选择：

   • Flex布局实现选项排列
   • 动态样式显示选中状态
   • 点击事件更新选中值

3. 尺寸选择：

   • 与颜色选择类似的实现
   • 统一的样式和交互方式
   • 独立的状态管理

评价区域实现

1. 评价标题栏：

   • 标题和查看全部按钮
   • FormLink实现评论列表跳转
   • 动态显示评论数量

2. 评分展示：

   • 大字号显示评分
   • 星级评分的动态渲染
   • 评论数量的补充显示

交互效果优化

1. 规格选择：

   • 选中项突出显示
   • 边框和背景色变化
   • 文字颜色区分状态

2. 评价链接：

   • 蓝色文字突出显示
   • 箭头图标指引方向
   • 评分使用醒目的橙色

总结

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

1. 完成了规格选择的交互
2. 实现了规格展开收起
3. 优化了评价区域展示
4. 添加了评论跳转功能

这些交互功能的实现，使商品详情页面更加生动和易用。