57.[HarmonyOS NEXT 实战案例三] 音乐专辑网格展示（上）

[HarmonyOS NEXT 实战案例三] 音乐专辑网格展示（上）

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

效果演示

1. 概述

HarmonyOS NEXT提供了强大的布局组件，其中GridRow和GridCol组件非常适合实现网格布局。在音乐应用中，专辑展示通常采用网格布局，以便用户可以直观地浏览各种音乐专辑。本教程将详细讲解如何使用GridRow和GridCol组件实现音乐专辑的网格展示布局。

2. 数据结构设计

在实现音乐专辑网格展示之前，我们需要先定义专辑的数据结构。在本案例中，我们定义了一个Album接口，包含专辑名称、艺术家和封面图片：

interface Album {
    name: string;
    artist: string;
    cover: ResourceStr;
}

这个接口定义了专辑的基本属性：

name：专辑名称，字符串类型
artist：艺术家名称，字符串类型
cover：专辑封面图片资源，ResourceStr类型

3. 数据准备

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

private albums:Album[] = [
    { name: '流行热歌', artist: '多位艺人', cover: $r("app.media.big29") },
    { name: '古典精选', artist: '世界名曲', cover: $r("app.media.big28") },
    { name: '摇滚经典', artist: '传奇乐队', cover: $r("app.media.big25") },
    { name: '电子舞曲', artist: 'DJ合集', cover: $r("app.media.big23") }
]

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

4. 布局实现

4.1 整体布局结构

音乐专辑网格展示的整体结构如下：

Column() {
    Text('推荐歌单')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 16 })
        .width('100%')
        .textAlign(TextAlign.Start)

    GridRow({ columns: 2, gutter: 16 }) {
        ForEach(this.albums, (album:Album) => {
            GridCol({ span: 1 }) {
                // 专辑卡片内容
            }
        })
    }
}
.width('100%')
.padding(16)

整体布局使用了Column组件作为容器，内部包含一个标题文本和一个GridRow网格布局。最外层的Column设置了100%宽度和16的内边距。

4.2 标题实现

标题部分使用Text组件实现：

Text('推荐歌单')
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
    .margin({ bottom: 16 })
    .width('100%')
    .textAlign(TextAlign.Start)

标题设置了20的字体大小、粗体字重、16的底部边距、100%宽度和左对齐。

4.3 GridRow配置

GridRow组件的配置如下：

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

参数说明：

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

4.4 GridCol配置

GridCol组件的配置如下：

GridCol({ span: 1 })

参数说明：

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

4.5 专辑卡片实现

每个专辑卡片的内部结构如下：

Column() {
    Image(album.cover)
        .width('100%')
        .aspectRatio(1)
        .borderRadius(8)

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

    Text(album.artist)
        .fontSize(12)
        .fontColor('#9E9E9E')
        .margin({ top: 4 })
}

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

专辑封面：使用Image组件，设置100%宽度、1:1的宽高比和8vp的圆角
专辑名称：使用Text组件，设置16的字体大小、8vp的上边距、100%宽度和左对齐
艺术家名称：使用Text组件，设置12的字体大小、灰色字体颜色和4vp的上边距

5. 布局效果分析

5.1 网格布局特点

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

特点	描述
列数	2列
间距	16vp
内边距	16vp

5.2 专辑卡片特点

每个专辑卡片具有以下特点：

特点	描述
封面宽高比	1:1
封面圆角	8vp
专辑名称字体大小	16
专辑名称上边距	8vp
艺术家名称字体大小	12
艺术家名称字体颜色	#9E9E9E（灰色）
艺术家名称上边距	4vp

6. GridRow和GridCol组件详解

6.1 GridRow组件

GridRow组件是HarmonyOS NEXT中实现网格布局的容器组件，它将子组件按照网格进行排列。GridRow组件的主要属性如下：

属性名	类型	描述
columns	number \	GridRowColumnOptions	设置布局列数
gutter	Length \	GutterOption	设置列间距
breakpoints	{ value: Array<Length>, reference: BreakpointsReference }	设置断点响应参考值
direction	GridRowDirection	设置布局方向

其中，GridRowColumnOptions类型可以设置不同断点下的列数，GutterOption类型可以设置水平和垂直方向的间距。

6.2 GridCol组件

GridCol组件用于定义网格中的列项，它必须作为GridRow的子组件使用。GridCol组件的主要属性如下：

属性名	类型	描述
span	number \	GridColSpanOption	设置跨列数
offset	number \	GridColOffsetOption	设置偏移列数
order	number \	GridColOrderOption	设置显示顺序

其中，GridColSpanOption、GridColOffsetOption和GridColOrderOption类型可以设置不同断点下的跨列数、偏移列数和显示顺序。

7. 完整代码

以下是音乐专辑网格展示的完整代码：

interface Album {
    name: string;
    artist: string;
    cover: ResourceStr;
}

@Component
export struct MusicAlbumGrid {
    private albums:Album[] = [
        { name: '流行热歌', artist: '多位艺人', cover: $r("app.media.big29") },
        { name: '古典精选', artist: '世界名曲', cover: $r("app.media.big28") },
        { name: '摇滚经典', artist: '传奇乐队', cover: $r("app.media.big25") },
        { name: '电子舞曲', artist: 'DJ合集', cover: $r("app.media.big23") }
    ]

    build() {
        Column() {
            Text('推荐歌单')
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
                .margin({ bottom: 16 })
                .width('100%')
                .textAlign(TextAlign.Start)

            GridRow({ columns: 2, gutter: 16 }) {
                ForEach(this.albums, (album:Album) => {
                    GridCol({ span: 1 }) {
                        Column() {
                            Image(album.cover)
                                .width('100%')
                                .aspectRatio(1)
                                .borderRadius(8)

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

                            Text(album.artist)
                                .fontSize(12)
                                .fontColor('#9E9E9E')
                                .margin({ top: 4 })
                        }
                    }
                })
            }
        }
        .width('100%')
        .padding(16)
    }
}

8. 与其他布局方式的比较

8.1 GridRow vs Flex布局

HarmonyOS NEXT提供了多种布局方式，除了GridRow和GridCol组件，还有Flex布局（Row和Column组件）。下面是两者的比较：

特性	GridRow + GridCol	Flex布局（Row/Column）
布局方式	网格布局	线性布局
响应式支持	原生支持断点响应	需要额外处理
间距设置	统一设置gutter	需要单独为每个子项设置margin
跨列能力	支持span属性设置跨列	不支持
偏移能力	支持offset属性设置偏移	不支持
排序能力	支持order属性设置顺序	不支持

8.2 适用场景

GridRow和GridCol组件适用于以下场景：

需要实现网格布局的场景，如相册、商品列表等
需要在不同屏幕尺寸下调整列数的响应式布局
需要某些元素跨列或偏移的复杂布局

Flex布局（Row和Column组件）适用于以下场景：

简单的线性布局，如水平或垂直排列的元素
需要更灵活的对齐方式和空间分配
不需要网格结构的布局

9. 总结

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