目录

案例介绍

本篇文章将介绍如何使用GridRow组件实现电商首页的分类导航功能。通过网格布局展示不同的商品分类，并为每个分类添加图标和文字说明。

代码实现

1. 分类数据定义

// 商品分类
interface Category {
  id: number;
  name: string;
  icon: string;
  color: string;
}

@Entry
@Component
struct ECommerceHomePage {
  // 商品分类数据
  @State categories: Category[] = [
    { id: 1, name: '手机', icon: 'https://example.com/icon1.png', color: '#FF5722' },
    { id: 2, name: '电脑', icon: 'https://example.com/icon2.png', color: '#2196F3' },
    { id: 3, name: '服装', icon: 'https://example.com/icon3.png', color: '#4CAF50' },
    { id: 4, name: '食品', icon: 'https://example.com/icon4.png', color: '#FFC107' },
    { id: 5, name: '家电', icon: 'https://example.com/icon5.png', color: '#9C27B0' },
    { id: 6, name: '美妆', icon: 'https://example.com/icon6.png', color: '#E91E63' },
    { id: 7, name: '母婴', icon: 'https://example.com/icon7.png', color: '#00BCD4' },
    { id: 8, name: '图书', icon: 'https://example.com/icon8.png', color: '#795548' },
    { id: 9, name: '运动', icon: 'https://example.com/icon9.png', color: '#607D8B' },
    { id: 10, name: '更多', icon: 'https://example.com/icon10.png', color: '#9E9E9E' },
  ];
}

2. 分类导航实现

@Builder
renderCategories() {
  Column() {
    Text('商品分类')
      .fontSize(18)
      .fontWeight(FontWeight.Bold)
      .width('100%')
      .padding({ left: 16, right: 16 })
    
    // 使用GridRow实现分类网格
    GridRow({
      columns: this.windowWidth <= 600 ? 5 : 10,  // 根据窗口宽度调整列数
      gutter: 8
    }) {
      ForEach(this.categories, (category: Category) => {
        GridItem() {
          Column() {
            // 分类图标
            Stack() {
              Circle()
                .width(48)
                .height(48)
                .fill(category.color + '20')  // 使用透明度为20%的分类颜色
              
              Image(category.icon)
                .width(24)
                .height(24)
            }
            .width(48)
            .height(48)
            
            // 分类名称
            Text(category.name)
              .fontSize(12)
              .margin({ top: 8 })
          }
          .width('100%')
          .padding({ top: 12, bottom: 12 })
          .onClick(() => {
            // 跳转到分类页面
          })
        }
      })
    }
    .width('100%')
    .padding({ left: 16, right: 16, top: 8, bottom: 8 })
    .backgroundColor(Color.White)
    .borderRadius(8)
    .margin({ left: 16, right: 16 })
  }
}

代码详解

1. 响应式布局设计

GridRow({
  columns: this.windowWidth <= 600 ? 5 : 10,  // 根据窗口宽度调整列数
  gutter: 8
})

分类导航的响应式设计：

1. 小屏幕(≤600px)：显示5列，两行布局
2. 大屏幕(>600px)：显示10列，单行布局
3. 使用gutter设置分类项间距

2. 分类项样式

分类项的设计要点：

1. 图标背景：使用Circle组件创建圆形背景
2. 颜色搭配：使用带透明度的品牌色
3. 布局结构：图标和文字垂直排列
4. 点击区域：整个分类项可点击

3. 容器样式

分类导航容器的样式特点：

1. 白色背景：突出显示分类区域
2. 圆角设计：增加视觉美感
3. 边距控制：与其他模块保持适当间距
4. 标题样式：使用粗体突出显示

总结

本篇文章展示了如何使用GridRow组件实现电商首页的分类导航功能。通过响应式设计，实现了在不同屏幕尺寸下的最佳显示效果。分类项的样式设计既美观又实用，为用户提供了清晰的分类入口。这种分类导航的实现方式不仅适用于电商应用，也可以应用于其他需要网格布局的场景。