[HarmonyOS NEXT 实战案例二] 新闻资讯网格列表（上）

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

效果演示

1. 概述

HarmonyOS NEXT提供了强大的布局组件，其中GridRow和GridCol组件不仅可以用于实现传统的网格布局，还可以用于创建列表布局。在本教程中，我们将详细讲解如何使用GridRow和GridCol组件实现新闻资讯列表布局，这种布局常见于新闻、资讯类应用的首页或分类页面。

2. 数据结构设计

在实现新闻资讯列表之前，我们需要先定义新闻项的数据结构。在本案例中，我们定义了一个NewsItemType接口，包含新闻标题、摘要和图片资源：

interface NewsItemType {
    title: string;
    summary: string;
    image: ResourceStr;
}

这个接口定义了新闻项的基本属性：

• title：新闻标题，字符串类型
• summary：新闻摘要，字符串类型
• image：新闻配图资源，ResourceStr类型

3. 数据准备

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

private newsItems:NewsItemType[] = [
    { title: 'HarmonyOS 4.0发布', summary: '全新分布式能力升级', image: $r("app.media.big1") },
    { title: '华为开发者大会', summary: '2023年HDC即将召开', image: $r("app.media.big31") },
    { title: '智能家居新趋势', summary: '全屋智能解决方案', image: $r("app.media.big30") },
    { title: '移动办公新时代', summary: '超级终端带来高效体验', image: $r("app.media.big27") }
]

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

4. 布局实现

4.1 整体布局结构

新闻资讯列表的整体结构如下：

Column() {
    GridRow({ columns: 1 }) {
        ForEach(this.newsItems, (item:NewsItemType) => {
            GridCol({ span: 1 }) {
                // 新闻项内容
            }
        })
    }
}
.width('100%')
.padding(12)

整体布局使用了Column组件作为容器，内部使用GridRow和GridCol组件实现列表布局。最外层的Column设置了100%宽度和12的内边距。

4.2 GridRow配置

在本案例中，GridRow组件的配置比较简单：

GridRow({ columns: 1 })

参数说明：

• columns: 1：设置网格为1列布局，这样每个新闻项都会占据整行宽度

4.3 GridCol配置

GridCol组件的配置也很简单：

GridCol({ span: 1 })

参数说明：

• span: 1：设置该列占用1个网格单元，即整行宽度

4.4 新闻项实现

每个新闻项的内部结构如下：

Row() {
    Image(item.image)
        .width(100)
        .height(80)
        .objectFit(ImageFit.Cover)
        .borderRadius(4)

    Column() {
        Text(item.title)
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .margin({ left: 12 })

        Text(item.summary)
            .fontSize(14)
            .margin({ left: 12, top: 4 })
    }
    .alignItems(HorizontalAlign.Start)
}
.padding(12)
.borderRadius(8)
.margin({ bottom: 8 })
.backgroundColor('#FFFFFF')

新闻项使用Row组件水平排列以下元素：

1. 新闻配图：使用Image组件，设置100宽度、80高度、Cover填充模式和4vp的圆角
2. 新闻内容：使用Column组件垂直排列标题和摘要
   • 标题：使用Text组件，设置16的字体大小、粗体字重和12vp的左边距
   • 摘要：使用Text组件，设置14的字体大小、12vp的左边距和4vp的上边距

整个新闻项设置了12vp的内边距、8vp的圆角、8vp的底部边距和白色背景。

5. 布局效果分析

5.1 列表布局特点

本案例中的列表布局具有以下特点：

5.2 新闻项特点

每个新闻项具有以下特点：

6. 完整代码

以下是新闻资讯列表的完整代码：

interface NewsItemType {
    title: string;
    summary: string;
    image: ResourceStr;
}

@Component
export struct NewsGrid {
    private newsItems:NewsItemType[] = [
        { title: 'HarmonyOS 4.0发布', summary: '全新分布式能力升级', image: $r("app.media.big1") },
        { title: '华为开发者大会', summary: '2023年HDC即将召开', image: $r("app.media.big31") },
        { title: '智能家居新趋势', summary: '全屋智能解决方案', image: $r("app.media.big30") },
        { title: '移动办公新时代', summary: '超级终端带来高效体验', image: $r("app.media.big27") }
    ]

    build() {
        Column() {
            GridRow({ columns: 1 }) {
                ForEach(this.newsItems, (item:NewsItemType) => {
                    GridCol({ span: 1 }) {
                        Row() {
                            Image(item.image)
                                .width(100)
                                .height(80)
                                .objectFit(ImageFit.Cover)
                                .borderRadius(4)

                            Column() {
                                Text(item.title)
                                    .fontSize(16)
                                    .fontWeight(FontWeight.Bold)
                                    .margin({ left: 12 })

                                Text(item.summary)
                                    .fontSize(14)
                                    .margin({ left: 12, top: 4 })
                            }
                            .alignItems(HorizontalAlign.Start)
                        }
                        .padding(12)
                        .borderRadius(8)
                        .margin({ bottom: 8 })
                        .backgroundColor('#FFFFFF')
                    }
                })
            }
        }
        .width('100%')
        .padding(12)
    }
}

7. 与传统列表组件的比较

7.1 GridRow vs List

HarmonyOS NEXT提供了专门的List组件用于创建列表，那么为什么在本案例中我们选择使用GridRow和GridCol组件呢？下面是两者的比较：

7.2 适用场景

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

• 需要在不同屏幕尺寸下调整列数的响应式布局
• 列表项布局复杂，需要更灵活的布局控制
• 列表项数量较少，不需要懒加载优化

List组件适用于以下场景：

• 大量数据的长列表，需要懒加载优化
• 需要内置滚动、刷新等功能
• 需要使用内置的列表动画效果

在本案例中，我们选择使用GridRow和GridCol组件，主要是为了展示这些组件在列表布局中的应用，以及它们提供的布局灵活性。

8. 总结

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