53.[HarmonyOS NEXT 实战案例一] 电商首页商品网格布局（上）

[HarmonyOS NEXT 实战案例一] 电商首页商品网格布局（上）

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

效果演示

1. 概述

HarmonyOS NEXT提供了强大的布局能力，其中GridRow和GridCol组件是实现网格布局的核心组件。在电商应用中，商品展示通常采用网格布局，以便在有限的屏幕空间内展示更多商品。本教程将详细讲解如何使用GridRow和GridCol组件实现电商首页的商品网格布局。

2. 数据结构设计

在实现电商首页商品网格布局之前，我们需要先定义商品的数据结构。在本案例中，我们定义了一个productsType接口，包含商品名称、价格和图片资源：

interface productsType {
    name: string
    price: string
    image: ResourceStr
}

这个接口定义了商品的基本属性：

• name：商品名称，字符串类型
• price：商品价格，字符串类型（包含货币符号）
• image：商品图片资源，ResourceStr类型

3. 数据准备

在组件内部，我们准备了一个商品数据数组，包含4个商品信息：

private products:productsType[] = [
    { name: '智能手表', price: '¥599', image: $r('app.media.phone') },
    { name: '无线耳机', price: '¥299', image: $r('app.media.img') },
    { name: '蓝牙音箱', price: '¥199', image: $r('app.media.img_1') },
    { name: '手机支架', price: '¥39', image: $r("app.media.big1") }
]

这里使用了$r资源引用方式来引用应用资源目录下的图片资源。

4. 布局实现

4.1 整体布局结构

电商首页商品网格布局的整体结构如下：

Column() {
    GridRow({ columns: 2, gutter: 12 }) {
        ForEach(this.products, (item:productsType) => {
            GridCol({ span: 1 }) {
                // 商品卡片内容
            }
        })
    }
}
.width('100%')
.padding(12)
.backgroundColor('#F5F5F5')

整体布局使用了Column组件作为容器，内部使用GridRow和GridCol组件实现网格布局。最外层的Column设置了100%宽度、12的内边距和浅灰色背景。

4.2 GridRow配置

GridRow组件是实现网格布局的关键，它接受以下参数：

GridRow({ columns: 2, gutter: 12 })

参数说明：

• columns: 2：设置网格为2列布局
• gutter: 12：设置网格项之间的间距为12vp

4.3 GridCol配置

GridCol组件用于定义网格中的列项，它接受以下参数：

GridCol({ span: 1 })

参数说明：

• span: 1：设置该列占用1个网格单元

4.4 商品卡片实现

每个商品卡片的内部结构如下：

Column() {
    Image(item.image)
        .width('100%')
        .aspectRatio(1)
        .objectFit(ImageFit.Cover)
        .borderRadius(8)

    Text(item.name)
        .fontSize(16)
        .margin({ top: 8 })
        .width('100%')
        .textAlign(TextAlign.Start)

    Text(item.price)
        .fontSize(14)
        .fontColor('#FF5722')
        .margin({ top: 4 })
}
.padding(8)
.backgroundColor('#FFFFFF')
.borderRadius(12)

商品卡片使用Column组件垂直排列以下元素：

1. 商品图片：使用Image组件，设置100%宽度、1:1的宽高比、Cover填充模式和8vp的圆角
2. 商品名称：使用Text组件，设置16的字体大小、8vp的上边距、100%宽度和左对齐
3. 商品价格：使用Text组件，设置14的字体大小、橙色字体颜色和4vp的上边距

整个卡片设置了8vp的内边距、白色背景和12vp的圆角。

5. 布局效果分析

5.1 网格布局特点

本案例中的网格布局具有以下特点：

特点	描述
列数	2列
间距	12vp
背景色	#F5F5F5（浅灰色）
内边距	12vp

5.2 商品卡片特点

每个商品卡片具有以下特点：

特点	描述
背景色	#FFFFFF（白色）
圆角	12vp
内边距	8vp
图片宽高比	1:1
图片圆角	8vp
商品名称字体大小	16
商品价格字体大小	14
商品价格颜色	#FF5722（橙色）

6. 完整代码

以下是电商首页商品网格布局的完整代码：

interface productsType {
    name: string
    price: string
    image: ResourceStr
}

@Component
export struct ECommerceGrid {
    private products:productsType[] = [
        { name: '智能手表', price: '¥599', image: $r('app.media.phone') },
        { name: '无线耳机', price: '¥299', image: $r('app.media.img') },
        { name: '蓝牙音箱', price: '¥199', image: $r('app.media.img_1') },
        { name: '手机支架', price: '¥39', image: $r("app.media.big1") }
    ]

    build() {
        Column() {
            GridRow({ columns: 2, gutter: 12 }) {
                ForEach(this.products, (item:productsType) => {
                    GridCol({ span: 1 }) {
                        Column() {
                            Image(item.image)
                                .width('100%')
                                .aspectRatio(1)
                                .objectFit(ImageFit.Cover)
                                .borderRadius(8)

                            Text(item.name)
                                .fontSize(16)
                                .margin({ top: 8 })
                                .width('100%')
                                .textAlign(TextAlign.Start)

                            Text(item.price)
                                .fontSize(14)
                                .fontColor('#FF5722')
                                .margin({ top: 4 })
                        }
                        .padding(8)
                        .backgroundColor('#FFFFFF')
                        .borderRadius(12)
                    }
                })
            }
        }
        .width('100%')
        .padding(12)
        .backgroundColor('#F5F5F5')
    }
}

7. 总结

本教程详细讲解了如何使用HarmonyOS NEXT的GridRow和GridCol组件实现电商首页的商品网格布局。通过合理的数据结构设计和布局配置，我们实现了一个美观、实用的电商商品展示页面。在下一篇教程中，我们将继续深入探讨如何优化这个布局，并添加更多交互功能。