[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组件实现电商首页的商品网格布局。通过合理的数据结构设计和布局配置,我们实现了一个美观、实用的电商商品展示页面。在下一篇教程中,我们将继续深入探讨如何优化这个布局,并添加更多交互功能。


全栈若城
6 声望2 粉丝