[HarmonyOS NEXT 实战案例八] 电影票务网格布局（上）

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

效果演示

1. 概述

在移动应用开发中，电影票务应用是一个常见的场景，用户可以通过应用查看正在热映的电影信息，并进行选座购票等操作。本教程将详细讲解如何使用HarmonyOS NEXT的GridRow和GridCol组件实现电影票务应用中的电影列表网格布局，帮助开发者掌握网格布局的基本用法和实现技巧。

本教程将涵盖以下内容：

• 电影数据结构设计
• 电影列表网格布局实现
• GridRow和GridCol组件详解
• 电影卡片UI设计与实现

2. 数据结构设计

在实现电影票务网格布局之前，我们需要先定义电影数据的结构。在本案例中，我们定义了一个MovieType接口，包含电影的基本信息：

interface MovieType {
    title: string;    // 电影标题
    rating: number;   // 电影评分
    poster: Resource; // 电影海报
    type: string;     // 电影类型
}

这个接口定义了电影的四个基本属性：

• title：电影标题，字符串类型
• rating：电影评分，数字类型
• poster：电影海报，Resource类型（HarmonyOS中的资源引用类型）
• type：电影类型，字符串类型（如科幻、动画、悬疑等）

3. 数据准备

定义好数据结构后，我们需要准备一些电影数据用于展示。在本案例中，我们在组件内部定义了一个电影数据数组：

private movies:MovieType[] = [
    { title: '流浪地球3', rating: 9.2, poster: $r("app.media.big7"), type: '科幻' },
    { title: '长安三万里', rating: 8.8, poster: $r("app.media.big5"), type: '动画' },
    { title: '消失的她', rating: 8.5, poster: $r("app.media.big1"), type: '悬疑' },
    { title: '封神第一部', rating: 8.9, poster: $r("app.media.big1"), type: '奇幻' }
]

这里我们准备了4部电影的数据，包括电影标题、评分、海报和类型。海报使用$r()方法引用应用资源。在实际应用中，这些数据通常会从服务器获取。

4. 布局实现

4.1 整体布局结构

电影票务网格布局的整体结构如下：

build() {
    Column() {
        Text('正在热映')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .margin({ bottom: 16 })
            .width('100%')
            .textAlign(TextAlign.Start)

        GridRow({ columns: 2, gutter: 16 }) {
            // 电影网格内容
        }
    }
    .width('100%')
    .padding(16)
}

整体布局使用一个Column容器，包含两个主要部分：

1. 标题文本：显示"正在热映"，使用Text组件实现
2. 电影网格：使用GridRow和GridCol组件实现

4.2 GridRow和GridCol配置

在本案例中，我们使用GridRow和GridCol组件实现电影网格布局：

GridRow({ columns: 2, gutter: 16 }) {
    ForEach(this.movies, (movie:MovieType) => {
        GridCol({ span: 1 }) {
            // 电影卡片内容
        }
    })
}

GridRow组件的配置：

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

GridCol组件的配置：

• span: 1：每个电影卡片占据1列的宽度

使用ForEach循环遍历电影数据数组，为每部电影创建一个GridCol网格项。

4.3 电影卡片实现

每个电影卡片的内部结构如下：

Column() {
    Image(movie.poster)
        .width('100%')
        .aspectRatio(0.7)
        .borderRadius(8)

    Text(movie.title)
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .margin({ top: 8 })
        .width('100%')
        .textAlign(TextAlign.Start)

    Row() {
        Text(movie.type)
            .fontSize(12)
            .fontColor('#9E9E9E')

        Row() {
            Image($r("app.media.heart_filled"))
                .width(12)
                .height(12)
                .margin({ right: 4 })

            Text(movie.rating.toFixed(1))
                .fontSize(12)
        }
        .margin({ left: 8 })
    }
    .width('100%')
    .margin({ top: 4 })
    .justifyContent(FlexAlign.SpaceBetween)
}

电影卡片使用Column容器，包含三个主要部分：

1. 电影海报：使用Image组件显示，设置宽度为100%，高宽比为0.7，圆角为8vp
2. 电影标题：使用Text组件显示，字体大小为16fp，字体粗细为Medium，顶部外边距为8vp
3. 电影信息行：使用Row容器，包含电影类型和评分两部分，两者之间使用SpaceBetween对齐方式

电影类型使用Text组件显示，字体大小为12fp，颜色为灰色(#9E9E9E)。

电影评分部分使用Row容器，包含一个心形图标和评分文本，评分文本使用toFixed(1)方法保留一位小数。

5. GridRow和GridCol组件详解

5.1 GridRow组件

GridRow是HarmonyOS NEXT提供的网格行容器组件，用于创建网格布局。它的主要属性包括：

属性名	类型	描述
columns	number | GridColumns	设置当前行列数
gutter	Length | GutterOption	设置列间距
breakpoints	BreakPoints	设置断点值
direction	GridRowDirection	设置布局方向，默认为GridRowDirection.Row

其中，GridColumns类型定义如下：

type GridColumns = {
  xs?: number; // 极小尺寸断点下的列数
  sm?: number; // 小尺寸断点下的列数
  md?: number; // 中尺寸断点下的列数
  lg?: number; // 大尺寸断点下的列数
  xl?: number; // 特大尺寸断点下的列数
  xxl?: number; // 超大尺寸断点下的列数
}

GutterOption类型定义如下：

type GutterOption = {
  x?: Length; // 横向间距
  y?: Length; // 纵向间距
}

5.2 GridCol组件

GridCol是HarmonyOS NEXT提供的网格列容器组件，用于在GridRow中创建网格项。它的主要属性包括：

属性名	类型	描述
span	number | GridColumnOption	设置当前组件跨越的列数
offset	number | GridColumnOption	设置当前组件的偏移列数
order	number | GridColumnOption	设置当前组件的顺序

其中，GridColumnOption类型定义如下：

type GridColumnOption = {
  xs?: number; // 极小尺寸断点下的值
  sm?: number; // 小尺寸断点下的值
  md?: number; // 中尺寸断点下的值
  lg?: number; // 大尺寸断点下的值
  xl?: number; // 特大尺寸断点下的值
  xxl?: number; // 超大尺寸断点下的值
}

6. 布局效果分析

本案例实现的电影票务网格布局效果如下：

1. 整体采用2列网格布局，每个电影卡片占据1列
2. 电影卡片包含海报、标题、类型和评分信息
3. 海报使用aspectRatio属性保持固定的高宽比，确保所有海报显示一致
4. 电影类型和评分信息使用justifyContent(FlexAlign.SpaceBetween)实现两端对齐

这种布局方式有以下优点：

1. 结构清晰，信息展示完整
2. 适合在不同尺寸的屏幕上显示
3. 用户可以快速浏览多部电影的基本信息

7. 完整代码

以下是电影票务网格布局的完整代码：

// 电影票务网格布局
interface MovieType {
    title: string;
    rating: number;
    poster: Resource;
    type: string;
}
@Component
export struct MovieTicketGrid {
    private movies:MovieType[] = [
        { title: '流浪地球3', rating: 9.2, poster: $r("app.media.big7"), type: '科幻' },
        { title: '长安三万里', rating: 8.8, poster: $r("app.media.big5"), type: '动画' },
        { title: '消失的她', rating: 8.5, poster: $r("app.media.big1"), type: '悬疑' },
        { title: '封神第一部', rating: 8.9, poster: $r("app.media.big1"), type: '奇幻' }
    ]

    build() {
        Column() {
            Text('正在热映')
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
                .margin({ bottom: 16 })
                .width('100%')
                .textAlign(TextAlign.Start)

            GridRow({ columns: 2, gutter: 16 }) {
                ForEach(this.movies, (movie:MovieType) => {
                    GridCol({ span: 1 }) {
                        Column() {
                            Image(movie.poster)
                                .width('100%')
                                .aspectRatio(0.7)
                                .borderRadius(8)

                            Text(movie.title)
                                .fontSize(16)
                                .fontWeight(FontWeight.Medium)
                                .margin({ top: 8 })
                                .width('100%')
                                .textAlign(TextAlign.Start)

                            Row() {
                                Text(movie.type)
                                    .fontSize(12)
                                    .fontColor('#9E9E9E')

                                Row() {
                                    Image($r("app.media.heart_filled"))
                                        .width(12)
                                        .height(12)
                                        .margin({ right: 4 })

                                    Text(movie.rating.toFixed(1))
                                        .fontSize(12)
                                }
                                .margin({ left: 8 })
                            }
                            .width('100%')
                            .margin({ top: 4 })
                            .justifyContent(FlexAlign.SpaceBetween)
                        }
                    }
                })
            }
        }
        .width('100%')
        .padding(16)
    }
}

8. 总结

本教程详细讲解了如何使用HarmonyOS NEXT的GridRow和GridCol组件实现电影票务应用中的电影列表网格布局。通过本教程，你应该已经掌握了：

1. 如何定义和准备电影数据
2. 如何使用GridRow和GridCol组件创建网格布局
3. 如何设计和实现电影卡片UI
4. GridRow和GridCol组件的主要属性和用法

在下一篇教程中，我们将在此基础上进一步优化电影票务网格布局，添加更多功能和交互效果，如电影详情页、购票功能等。