[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组件水平排列以下元素：
- 新闻配图：使用Image组件，设置100宽度、80高度、Cover填充模式和4vp的圆角
- 新闻内容：使用Column组件垂直排列标题和摘要
- 标题：使用Text组件，设置16的字体大小、粗体字重和12vp的左边距
- 摘要：使用Text组件，设置14的字体大小、12vp的左边距和4vp的上边距
整个新闻项设置了12vp的内边距、8vp的圆角、8vp的底部边距和白色背景。
5. 布局效果分析
5.1 列表布局特点
本案例中的列表布局具有以下特点：
| 特点 | 描述 |
|---|---|
| 列数 | 1列 |
| 排列方式 | 垂直排列 |
| 内边距 | 12vp |
5.2 新闻项特点
每个新闻项具有以下特点：
| 特点 | 描述 |
|---|---|
| 布局方式 | 水平排列（左图右文） |
| 背景色 | #FFFFFF（白色） |
| 圆角 | 8vp |
| 内边距 | 12vp |
| 底部边距 | 8vp |
| 图片尺寸 | 100×80 |
| 图片圆角 | 4vp |
| 标题字体大小 | 16 |
| 标题字体粗细 | 粗体 |
| 摘要字体大小 | 14 |
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组件呢？下面是两者的比较：
| 特性 | GridRow + GridCol | List + ListItem |
|---|---|---|
| 布局灵活性 | 高，可以轻松实现复杂布局 | 中，主要适用于简单列表 |
| 响应式支持 | 原生支持断点响应 | 需要额外处理 |
| 性能 | 适用于项目数量较少的场景 | 适用于大量数据的场景，有懒加载优化 |
| 滚动特性 | 需要配合Scroll组件使用 | 内置滚动功能 |
| 动画效果 | 需要自定义实现 | 内置多种动画效果 |
7.2 适用场景
GridRow和GridCol组件适用于以下场景：
- 需要在不同屏幕尺寸下调整列数的响应式布局
- 列表项布局复杂，需要更灵活的布局控制
- 列表项数量较少，不需要懒加载优化
List组件适用于以下场景：
- 大量数据的长列表，需要懒加载优化
- 需要内置滚动、刷新等功能
- 需要使用内置的列表动画效果
在本案例中，我们选择使用GridRow和GridCol组件，主要是为了展示这些组件在列表布局中的应用，以及它们提供的布局灵活性。
8. 总结
本教程详细讲解了如何使用HarmonyOS NEXT的GridRow和GridCol组件实现新闻资讯列表布局。通过合理的数据结构设计和布局配置，我们实现了一个简洁、美观的新闻列表页面。在下一篇教程中，我们将继续深入探讨如何优化这个布局，并添加更多交互功能。
