[HarmonyOS NEXT 实战案例一：Grid] 基础网格布局：打造精美电商商品列表

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

效果演示

1. Grid组件概述

在HarmonyOS NEXT的ArkUI框架中，Grid组件是一种强大的网格容器，它与GridItem子组件一起使用，可以创建灵活的网格布局。网格布局是由"行"和"列"分割的单元格组成，通过指定"项目"所在的单元格，可以实现各种各样的布局效果。

1.1 Grid与GridItem的关系

• Grid：网格容器组件，用于设置网格布局相关参数
• GridItem：网格子项组件，定义子组件相关特征
• Grid的子组件必须是GridItem组件

1.2 Grid组件的主要特性

2. 电商商品列表实战

在本案例中，我们将使用Grid和GridItem组件创建一个电商应用的商品列表页面，展示Apple Store的产品。

2.1 页面结构概览

我们的电商商品列表页面包含以下几个部分：

1. 顶部标题栏：显示应用名称和操作按钮
2. 分类标签：显示商品分类和查看更多选项
3. 商品网格：使用Grid和GridItem展示商品信息
4. 底部导航栏：提供应用的主要导航选项

2.2 数据模型定义

首先，我们定义商品数据模型：

interface Product {
    id: number,
    name: string,
    price: number,
    image: Resource,
    discount?: number
}

然后，创建商品数据数组：

@State products:Product[] = [
    { id: 1, name: 'iPhone 15 Pro', price: 7999, image: $r('app.media.phone'), discount: 10 },
    { id: 2, name: 'MacBook Pro', price: 12999, image: $r('app.media.big15') },
    { id: 3, name: 'iPad Air', price: 4399, image: $r('app.media.big14'), discount: 5 },
    // 更多商品...
]

2.3 顶部标题栏实现

// 顶部标题栏
Row() {
    Text('Apple Store')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .fontColor('#1D1D1F')

    Blank()

    Button() {
        Image($r('app.media.search_icon'))
            .width(24)
            .height(24)
    }
    .width(40)
    .height(40)
    .borderRadius(20)
    .backgroundColor('#F5F5F7')

    Button() {
        Image($r('app.media.cart_icon'))
            .width(24)
            .height(24)
    }
    .width(40)
    .height(40)
    .borderRadius(20)
    .backgroundColor('#F5F5F7')
    .margin({ left: 12 })
}
.width('100%')
.padding({ left: 20, right: 20, top: 10, bottom: 10 })
.backgroundColor('#FFFFFF')

2.4 分类标签实现

// 分类标签
Row() {
    Text('热门商品')
        .fontSize(18)
        .fontWeight(FontWeight.Medium)
        .fontColor('#1D1D1F')

    Blank()

    Text('查看全部')
        .fontSize(14)
        .fontColor('#007AFF')
}
.width('100%')
.padding({ left: 20, right: 20, top: 16, bottom: 16 })
.backgroundColor('#FFFFFF')

3. Grid网格布局实现

3.1 Grid容器配置

Grid() {
    // GridItem子项...
}
.columnsTemplate('1fr 1fr') // 两列布局
.columnsGap(16)             // 列间距
.rowsGap(16)                // 行间距
.width('100%')
.layoutWeight(1)
.padding({ left: 20, right: 20, bottom: 20 })
.backgroundColor('#F2F2F7')

在这个配置中：

• columnsTemplate('1fr 1fr')：设置两列布局，每列占比相等
• columnsGap(16)：设置列间距为16vp
• rowsGap(16)：设置行间距为16vp

3.2 GridItem商品卡片实现

我们使用ForEach循环遍历商品数据，为每个商品创建一个GridItem：

ForEach(this.products, (product:Product) => {
    GridItem() {
        Column() {
            // 商品图片容器
            Stack({ alignContent: Alignment.TopEnd }) {
                Image(product.image)
                    .width('100%')
                    .height(120)
                    .objectFit(ImageFit.Contain)
                    .backgroundColor('#F8F8F8')
                    .borderRadius(12)

                // 折扣标签
                if (product.discount) {
                    Text(`-${product.discount}%`)
                        .fontSize(12)
                        .fontColor('#FFFFFF')
                        .backgroundColor('#FF3B30')
                        .padding({ left: 8, right: 8, top: 4, bottom: 4 })
                        .borderRadius(8)
                        .margin({ top: 8, right: 8 })
                }
            }
            .width('100%')
            .height(120)

            // 商品信息
            Column() {
                Text(product.name)
                    .fontSize(14)
                    .fontWeight(FontWeight.Medium)
                    .fontColor('#1D1D1F')
                    .maxLines(2)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                    .margin({ top: 12 })

                Row() {
                    if (product.discount) {
                        Text(`¥${(product.price * (100 - product.discount) / 100).toFixed(0)}`)
                            .fontSize(16)
                            .fontWeight(FontWeight.Bold)
                            .fontColor('#FF3B30')

                        Text(`¥${product.price}`)
                            .fontSize(12)
                            .fontColor('#8E8E93')
                            .decoration({ type: TextDecorationType.LineThrough })
                            .margin({ left: 4 })
                    } else {
                        Text(`¥${product.price}`)
                            .fontSize(16)
                            .fontWeight(FontWeight.Bold)
                            .fontColor('#1D1D1F')
                    }

                    Blank()

                    Button() {
                        Image($r('app.media.add_icon'))
                            .width(16)
                            .height(16)
                            .fillColor('#FFFFFF')
                    }
                    .width(28)
                    .height(28)
                    .borderRadius(14)
                    .backgroundColor('#007AFF')
                }
                .width('100%')
                .margin({ top: 8 })
            }
            .alignItems(HorizontalAlign.Start)
            .width('100%')
        }
        .width('100%')
        .padding(12)
        .backgroundColor('#FFFFFF')
        .borderRadius(16)
        .shadow({
            radius: 8,
            color: 'rgba(0, 0, 0, 0.1)',
            offsetX: 0,
            offsetY: 2
        })
    }
    .onClick(() => {
        console.log(`点击了商品: ${product.name}`)
    })
})

每个GridItem包含：

1. 商品图片：使用Stack布局，支持在右上角显示折扣标签
2. 商品名称：支持最多显示两行，超出部分使用省略号
3. 价格信息：显示原价和折扣价（如果有折扣）
4. 添加按钮：用于将商品添加到购物车

3.3 底部导航栏实现

// 底部导航栏
Row() {
    Column() {
        Image($r('app.media.home_icon'))
            .width(24)
            .height(24)
            .fillColor('#007AFF')

        Text('首页')
            .fontSize(12)
            .fontColor('#007AFF')
            .margin({ top: 4 })
    }
    .layoutWeight(1)

    // 其他导航项...
}
.width('100%')
.height(60)
.backgroundColor('#FFFFFF')
.borderColor('#E5E5EA')
.borderWidth({ top: 1 })

4. Grid组件的关键属性详解

4.1 行列设置

4.2 GridItem定位属性

4.3 布局方向

Grid() {
  // 子项...
}
.layoutDirection(GridDirection.Row) // 水平方向布局

GridDirection枚举值：

• GridDirection.Row：水平方向布局（默认）
• GridDirection.Column：垂直方向布局

5. 布局技巧与最佳实践

5.1 响应式网格布局

在不同屏幕尺寸下，可以动态调整列数：

// 根据屏幕宽度调整列数
let columns = '1fr 1fr';
if (screenWidth >= 600) {
  columns = '1fr 1fr 1fr';
}
if (screenWidth >= 840) {
  columns = '1fr 1fr 1fr 1fr';
}

Grid() {
  // 子项...
}
.columnsTemplate(columns)

5.2 商品卡片设计技巧

1. 阴影效果：使用shadow属性为卡片添加阴影，增强立体感
2. 圆角处理：为卡片和图片添加borderRadius，使界面更加圆润
3. 折扣标签：使用条件渲染显示折扣标签，突出促销商品
4. 文本溢出处理：使用maxLines和textOverflow处理长文本

5.3 网格间距优化

适当的网格间距可以提升用户体验：

• 列间距(columnsGap)：通常设置为12-20vp
• 行间距(rowsGap)：通常设置为16-24vp

6. 总结

在本教程中，我们学习了如何使用HarmonyOS NEXT的Grid和GridItem组件创建一个电商商品列表页面。我们详细讲解了Grid组件的基本概念、主要属性和使用方法，以及如何通过合理的布局和样式设计，打造美观实用的商品卡片。