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