[HarmonyOS NEXT 实战案例十五] 电商分类导航网格布局

项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star

效果演示

1. 概述

本教程将详细讲解如何使用HarmonyOS NEXT的GridRow和GridCol组件实现一个电商分类导航的网格布局。电商分类导航是电商应用中常见的功能模块，通过网格布局可以清晰地展示各个商品分类，帮助用户快速找到所需的商品类别。

本教程将涵盖以下内容：

• 分类数据结构设计
• 整体布局实现
• 网格配置与分类项实现
• 样式美化与交互优化
• GridRow和GridCol组件详解

2. 分类数据结构设计

首先，我们需要定义分类的数据结构，包含分类的名称和图标：

interface CategoryType {
    name: string;   // 分类名称
    icon: Resource; // 分类图标
}

这个接口定义了分类的两个基本属性：

• name：分类名称，如"数码"、"服饰"等
• icon：分类图标，使用Resource类型，引用应用资源中的图标

3. 数据准备

接下来，我们准备一些示例分类数据用于展示：

private categories:CategoryType[] = [
    { name: '数码', icon: $r("app.media.big20") },
    { name: '服饰', icon: $r("app.media.big30") },
    { name: '食品', icon: $r("app.media.big26") },
    { name: '家居', icon: $r("app.media.big13") },
    { name: '美妆', icon: $r("app.media.big11") },
    { name: '母婴', icon: $r("app.media.big15") },
    { name: '运动', icon: $r("app.media.big19") },
    { name: '更多', icon: $r("app.media.big14") }
]

这里我们创建了一个包含八个分类的数组，每个分类都包含名称和图标。图标使用$r()函数引用应用资源中的图片。

4. 整体布局结构

电商分类导航的整体布局采用Column容器，内部包含两个主要部分：

build() {
    Column() {
        // 标题
        Text('商品分类')
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
            .margin({ bottom: 16 })
            .width('100%')
            .textAlign(TextAlign.Start)

        // 分类网格
        GridRow({ columns: 4, gutter: 12 }) {
            // ...
        }
    }
    .width('100%')
    .padding(16)
}

这种结构将分类导航界面分为两个垂直排列的部分：

1. 顶部的标题区域
2. 底部的分类网格区域

整个Column容器设置宽度为100%，内边距为16像素，使内容与屏幕边缘保持适当距离。

5. 标题实现

标题部分使用Text组件，显示"商品分类"：

Text('商品分类')
    .fontSize(18)
    .fontWeight(FontWeight.Bold)
    .margin({ bottom: 16 })
    .width('100%')
    .textAlign(TextAlign.Start)

在这个部分：

• 文本内容为"商品分类"
• 字体大小为18像素
• 字体粗细为粗体（FontWeight.Bold）
• 底部边距为16像素，与下方的分类网格保持适当距离
• 宽度为100%，占据整个父容器的宽度
• 文本对齐方式为左对齐（TextAlign.Start）

6. 分类网格实现

分类网格部分使用GridRow和GridCol组件，通过ForEach循环遍历分类数组：

GridRow({ columns: 4, gutter: 12 }) {
    ForEach(this.categories, (category:CategoryType) => {
        GridCol({ span: 1 }) {
            Column() {
                Image(category.icon)
                    .width(40)
                    .height(40)
                    .margin({ bottom: 8 })

                Text(category.name)
                    .fontSize(14)
            }
            .padding(12)
            .backgroundColor('#FFFFFF')
            .borderRadius(8)
            .width('100%')
            .justifyContent(FlexAlign.Center)
        }
    })
}

在这个部分：

• GridRow设置为四列布局（columns: 4），列间距为12像素（gutter: 12）
• ForEach循环遍历categories数组，为每个分类创建一个GridCol
• 每个GridCol的span设置为1，表示占据一列
• 每个分类项内部使用Column容器，包含两个组件：
  • Image组件显示分类图标，宽高为40像素，底部边距为8像素
  • Text组件显示分类名称，字体大小为14像素
• Column容器设置内边距为12像素，背景色为白色，边框圆角为8像素，宽度为100%，内容居中对齐

7. GridRow和GridCol组件详解

在本案例中，我们使用了GridRow和GridCol组件来实现分类网格布局：

GridRow({ columns: 4, gutter: 12 }) {
    GridCol({ span: 1 }) {
        // 内容
    }
}

7.1 GridRow组件

GridRow是HarmonyOS NEXT提供的网格行容器组件，用于创建网格布局。它具有以下主要属性：

属性	类型	描述
columns	number | { xs?: number, sm?: number, md?: number, lg?: number, xl?: number, xxl?: number }	设置布局列数
gutter	number | { x?: number, y?: number }	栅格间隔
breakpoints	{ value: string[], reference: BreakpointsReference }	设置断点值的断点数列以及基于窗口或容器尺寸的相应参照
direction	GridRowDirection	栅格布局排列方向

在本案例中，我们设置了：

• columns: 4：将网格分为4列
• gutter: 12：设置列间距为12像素

7.2 GridCol组件

GridCol是HarmonyOS NEXT提供的网格列容器组件，用于在GridRow中创建网格列。它具有以下主要属性：

属性	类型	描述
span	number | { xs?: number, sm?: number, md?: number, lg?: number, xl?: number, xxl?: number }	列宽度
offset	number | { xs?: number, sm?: number, md?: number, lg?: number, xl?: number, xxl?: number }	列偏移量
order	number | { xs?: number, sm?: number, md?: number, lg?: number, xl?: number, xxl?: number }	列顺序

在本案例中，我们设置了：

• span: 1：每个分类项占据一列

8. 样式美化与交互优化

8.1 分类项样式

每个分类项的样式设置如下：

Column() {
    // 内容
}
.padding(12)
.backgroundColor('#FFFFFF')
.borderRadius(8)
.width('100%')
.justifyContent(FlexAlign.Center)

这些样式设置使分类项具有以下视觉特点：

• 内边距为12像素，使内容与边框保持适当距离
• 背景色为白色，与页面背景形成对比
• 边框圆角为8像素，使分类项看起来更加现代和友好
• 宽度为100%，占据整个GridCol的宽度
• 内容居中对齐，使图标和文本在视觉上更加平衡

8.2 图标和文本样式

图标和文本的样式设置如下：

Image(category.icon)
    .width(40)
    .height(40)
    .margin({ bottom: 8 })

Text(category.name)
    .fontSize(14)

这些样式设置使图标和文本具有以下视觉特点：

• 图标宽高为40像素，大小适中，易于识别
• 图标底部边距为8像素，与下方的文本保持适当距离
• 文本字体大小为14像素，清晰可读

9. 布局效果分析

本案例中的电商分类导航布局具有以下特点：

1. 结构清晰：整体布局分为标题和分类网格两个部分，结构简单明了
2. 网格均匀：分类项以4列网格排列，视觉上整齐有序
3. 视觉层次分明：每个分类项包含图标和文本，形成清晰的视觉层次
4. 样式统一：所有分类项使用相同的样式，保持界面的一致性
5. 空间利用合理：通过网格布局，有效利用屏幕空间，展示更多分类

这种布局设计使电商分类导航界面既美观又实用，用户可以轻松地浏览和选择不同的商品分类。

10. 完整代码

下面是电商分类导航网格布局的完整代码：

// 电商分类导航网格布局
interface CategoryType {
    name: string;
    icon: Resource;
}

@Component
export struct CategoryGrid {
    private categories:CategoryType[] = [
        { name: '数码', icon: $r("app.media.big20") },
        { name: '服饰', icon: $r("app.media.big30") },
        { name: '食品', icon: $r("app.media.big26") },
        { name: '家居', icon: $r("app.media.big13") },
        { name: '美妆', icon: $r("app.media.big11") },
        { name: '母婴', icon: $r("app.media.big15") },
        { name: '运动', icon: $r("app.media.big19") },
        { name: '更多', icon: $r("app.media.big14") }
    ]

    build() {
        Column() {
            Text('商品分类')
                .fontSize(18)
                .fontWeight(FontWeight.Bold)
                .margin({ bottom: 16 })
                .width('100%')
                .textAlign(TextAlign.Start)

            GridRow({ columns: 4, gutter: 12 }) {
                ForEach(this.categories, (category:CategoryType) => {
                    GridCol({ span: 1 }) {
                        Column() {
                            Image(category.icon)
                                .width(40)
                                .height(40)
                                .margin({ bottom: 8 })

                            Text(category.name)
                                .fontSize(14)
                        }
                        .padding(12)
                        .backgroundColor('#FFFFFF')
                        .borderRadius(8)
                        .width('100%')
                        .justifyContent(FlexAlign.Center)
                    }
                })
            }
        }
        .width('100%')
        .padding(16)
    }
}

11. 网格布局的优势与应用场景

11.1 网格布局的优势

在电商分类导航中使用网格布局有以下优势：

1. 空间利用效率高：网格布局可以在有限的空间内展示更多的分类项
2. 视觉结构清晰：网格布局使分类项排列整齐，易于浏览和查找
3. 响应式适配：网格布局可以根据屏幕尺寸自动调整，适应不同设备
4. 交互体验好：网格布局使分类项大小适中，便于用户点击选择

11.2 适用场景

网格布局适用于以下场景：

1. 分类导航：如本案例中的电商分类导航
2. 图片展示：如相册、商品列表等
3. 功能入口：如应用首页的功能模块入口
4. 数据展示：如统计数据、卡片式信息展示等

12. 总结

本教程详细讲解了如何使用HarmonyOS NEXT的GridRow和GridCol组件实现电商分类导航的网格布局。通过合理的数据结构设计和布局规划，我们创建了一个简洁美观的电商分类导航界面。

主要内容包括：

• 分类数据结构设计和数据准备
• 整体布局结构的实现
• 标题和分类网格的详细实现
• GridRow和GridCol组件的详解
• 样式美化与交互优化

通过本教程，你应该已经掌握了如何使用GridRow和GridCol组件实现网格布局，以及如何结合其他组件（如Image、Text等）创建功能丰富的界面。这些技能可以应用到各种需要网格展示的场景中，如分类导航、图片展示、功能入口等。

网格布局是UI设计中常用的布局方式，掌握它可以帮助你创建更加专业和用户友好的应用界面。在实际应用中，你可以根据具体需求调整网格的列数、间距和样式，创建更加个性化的网格布局。