[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组件垂直排列以下元素:
- 商品图片:使用Image组件,设置100%宽度、1:1的宽高比、Cover填充模式和8vp的圆角
- 商品名称:使用Text组件,设置16的字体大小、8vp的上边距、100%宽度和左对齐
- 商品价格:使用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组件实现电商首页的商品网格布局。通过合理的数据结构设计和布局配置,我们实现了一个美观、实用的电商商品展示页面。在下一篇教程中,我们将继续深入探讨如何优化这个布局,并添加更多交互功能。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。