目录

案例介绍

本篇文章将介绍如何在商品详情页中实现用户评价功能，并对整体界面进行样式优化，包括评分展示、评价列表和视觉效果的提升。

代码实现

@Entry
@Component
struct ProductDetailPage {
  // 用户评价数据
  private reviews = [
    { user: '用户1234', rating: 5, content: '手表非常好用，续航能力强，功能丰富，戴着很舒适。', date: '2023-10-15' },
    { user: '用户5678', rating: 4, content: '整体不错，就是充电有点慢，其他都挺满意的。', date: '2023-10-12' },
    { user: '用户9012', rating: 5, content: '外观设计很精美，系统流畅，健康监测功能准确。', date: '2023-10-10' }
  ];

  // 评价部分展开状态
  @State reviewExpanded: boolean = false;

  build() {
    Column() {
      // 用户评价（可折叠）
      FolderStack({ initialExpand: this.reviewExpanded }) {
        // 评价标题
        FolderStackHeader() {
          Row() {
            Column({ space: 4 }) {
              Text('用户评价')
                .fontSize(16)
                .fontWeight(FontWeight.Medium)
              
              Text(`${this.reviews.length}条评价`)
                .fontSize(12)
                .fontColor('#666666')
            }
            .alignItems(HorizontalAlign.Start)
            
            Blank()
            
            Row() {
              ForEach([1, 2, 3, 4, 5], (star) => {
                Image($r('app.media.ic_star_filled'))
                  .width(16)
                  .height(16)
                  .fillColor('#FFB300')
              })
            }
            .margin({ right: 8 })
            
            Text('4.8')
              .fontSize(16)
              .fontWeight(FontWeight.Medium)
              .fontColor('#FFB300')
            
            Image(this.reviewExpanded ? $r('app.media.ic_arrow_up') : $r('app.media.ic_arrow_down'))
              .width(20)
              .height(20)
              .margin({ left: 8 })
          }
          .width('100%')
          .padding({ left: 16, right: 16 })
        }
        
        // 评价内容
        FolderStackContent() {
          Column({ space: 16 }) {
            ForEach(this.reviews, (review) => {
              Column({ space: 8 }) {
                // 用户信息和评分
                Row() {
                  Text(review.user)
                    .fontSize(14)
                    .fontWeight(FontWeight.Medium)
                  
                  Blank()
                  
                  Row() {
                    ForEach([1, 2, 3, 4, 5], (star) => {
                      Image(star <= review.rating ? $r('app.media.ic_star_filled') : $r('app.media.ic_star_empty'))
                        .width(16)
                        .height(16)
                        .fillColor(star <= review.rating ? '#FFB300' : '#DDDDDD')
                    })
                  }
                }
                .width('100%')
                
                // 评价内容
                Text(review.content)
                  .fontSize(14)
                  .fontColor('#333333')
                  .width('100%')
                  .textAlign(TextAlign.Start)
                
                // 评价日期
                Text(review.date)
                  .fontSize(12)
                  .fontColor('#999999')
                  .width('100%')
                  .textAlign(TextAlign.End)
                
                // 分隔线
                if (review !== this.reviews[this.reviews.length - 1]) {
                  Divider()
                    .opacity(0.5)
                    .margin({ top: 8 })
                }
              }
              .alignItems(HorizontalAlign.Start)
              .width('100%')
              .padding(16)
              .backgroundColor('#FFFFFF')
              .borderRadius(8)
            })
            
            // 查看更多按钮
            Button('查看全部评价')
              .width('100%')
              .height(40)
              .backgroundColor('#F5F5F5')
              .fontColor('#666666')
              .margin({ top: 8 })
          }
          .width('100%')
          .padding(16)
        }
      }
      .width('100%')
      .borderRadius(8)
      .headerBackgroundColor('#FFFFFF')
      .contentBackgroundColor('#FFFFFF')
      .dividerColor('#EEEEEE')
      .onChange((isExpanded: boolean) => {
        this.reviewExpanded = isExpanded;
      })
      
      // 样式优化：阴影效果
      .shadow({
        radius: 8,
        color: '#00000010',
        offsetX: 0,
        offsetY: 2
      })
      // 动画效果
      .animation({
        duration: 300,
        curve: Curve.EaseInOut,
        iterations: 1,
        playMode: PlayMode.Normal
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
    .padding(16)
  }
}

代码详解

1. 评价数据结构

private reviews = [
  {
    user: string,
    rating: number,
    content: string,
    date: string
  }
];

• 定义评价数据结构
• 包含用户信息、评分、内容和日期
• 支持多条评价展示

2. 评价标题区域

Row() {
  Column({ space: 4 }) { /* 标题和评价数 */ }
  Row() { /* 评分星级 */ }
  Text('4.8') /* 评分数值 */
  Image(/* 展开/收起图标 */)
}

• 标题区域包含多个信息
• 评分使用星级图标展示
• 展开状态指示图标

3. 评价列表实现

Column({ space: 16 }) {
  ForEach(this.reviews, (review) => {
    Column({ space: 8 }) {
      Row() { /* 用户信息和评分 */ }
      Text(review.content)
      Text(review.date)
      Divider()
    }
  })
  Button('查看全部评价')
}

• 评价项采用卡片式布局
• 包含用户信息、评分、内容和日期
• 添加分隔线和查看更多按钮

4. 样式优化

.shadow({
  radius: 8,
  color: '#00000010',
  offsetX: 0,
  offsetY: 2
})
.animation({
  duration: 300,
  curve: Curve.EaseInOut
})

• 添加阴影效果提升层次感
• 展开/收起动画效果
• 统一的圆角和间距

总结

本篇文章展示了如何实现商品详情页的用户评价功能和样式优化，主要包括：

• 评价列表的数据展示
• 评分系统的实现
• 卡片式布局设计
• 视觉效果的优化

通过这些实现，使商品详情页具有了完整的评价功能和专业的视觉表现。