文章目录一、引言二、效果预览与整体结构三、核心代码实现3.1 数据模型3.2 主页面布局3.3 自定义新闻卡片组件四、关键知识点解析4.1 List 组件的子元素限制4.2 文本溢出处理4.3 Span 组件的妙用五、总结这是一个使用鸿蒙技术开发的本地原生记账应用非常适合大家用来练手。相关源码已上传至 Github点击此处查看项目。欢迎大家交流、指正也欢迎提交 PR。一、引言在鸿蒙应用开发中List组件是构建长列表场景的核心组件。无论是新闻列表、设置页面还是聊天记录都离不开它。本文将通过一个模仿新闻列表的实战案例带你快速掌握List组件的核心用法。二、效果预览与整体结构我们先来看一下最终要实现的效果页面顶部是一个搜索框TextInput下方是一个新闻列表List。列表中的每一个条目都是一条新闻包含新闻标题、作者和发布时间。整体布局结构如下TextInput作为搜索框位于页面顶部。List作为列表容器位于搜索框下方。ForEach遍历新闻数据数组动态生成列表项。自定义子组件每个列表项都是一个自定义组件用于展示单条新闻的标题、作者和发布时间。三、核心代码实现3.1 数据模型首先我们需要定义一个新闻数据模型用于存储新闻标题、作者和发布时间。// NewsItem.etsexportinterfaceNewsItem{title:string;author:string;publishTime:string;}3.2 主页面布局接下来我们编写主页面包含TextInput和List组件。// Index.etsimport{NewsItem}from./NewsItem;EntryComponentstruct Index{StatenewsList:NewsItem[][{title:鸿蒙生态再添新成员多家头部应用宣布适配,author:科技日报,publishTime:2026-06-26 10:00},{title:华为开发者大会亮点回顾HarmonyOS NEXT 正式发布,author:IT之家,publishTime:2026-06-25 15:30},{title:深入理解 ArkTS 语法状态管理与数据驱动 UI 更新,author:鸿蒙开发者社区,publishTime:2026-06-24 09:00},{title:从零开始搭建鸿蒙应用开发环境配置与第一个 Hello World,author:CSDN 博主,publishTime:2026-06-23 14:20},{title:鸿蒙原生应用上架流程详解从签名到审核全攻略,author:华为开发者联盟,publishTime:2026-06-22 11:45},{title:ArkUI 动画实战打造流畅的页面转场与交互动效,author:鸿蒙技术周刊,publishTime:2026-06-21 16:00},{title:鸿蒙分布式技术入门跨设备数据同步与任务迁移,author:开发者头条,publishTime:2026-06-20 08:30},{title:性能优化实战鸿蒙应用冷启动速度提升 50% 的秘诀,author:技术博客,publishTime:2026-06-19 13:10},{title:鸿蒙安全机制解析权限管理、数据加密与隐私保护,author:安全研究,publishTime:2026-06-18 09:50},{title:从 Web 到鸿蒙前端开发者快速上手 ArkTS 指南,author:前端之巅,publishTime:2026-06-17 17:25},];build(){Column(){// 搜索框TextInput({placeholder:搜索新闻...}).width(100%).height(40).margin({bottom:10})// 新闻列表List(){ForEach(this.newsList,(item:NewsItem){ListItem(){NewsCard({newsItem:item})}},(item:NewsItem)item.title)}.width(100%).height(100%)}.padding(10).width(100%).height(100%)}}3.3 自定义新闻卡片组件每个新闻条目都是一个独立的Component我们将其命名为NewsCard。它包含新闻标题、作者和发布时间。// NewsCard.etsimport{NewsItem}from./NewsItem;Componentexportstruct NewsCard{PropnewsItem:NewsItem;build(){Column(){// 新闻标题最多显示两行超出显示省略号Text(this.newsItem.title).fontSize(16).fontWeight(FontWeight.Bold).maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis}).width(100%)// 作者和发布时间Row(){Text(){Span(this.newsItem.author).fontSize(12).fontColor(Color.Gray)Span( | ).fontSize(12).fontColor(Color.Gray)Span(this.newsItem.publishTime).fontSize(12).fontColor(Color.Gray)}.fontSize(12).fontColor(Color.Gray)}.width(100%).margin({top:8})}.padding(12).width(100%).backgroundColor(Color.White).borderRadius(8).margin({bottom:8})}}运行效果四、关键知识点解析4.1List组件的子元素限制List组件的子元素不能是任意组件它必须是ListItem或ListItemGroup。如果你尝试在List中直接放置一个Column或Text编译器会报错。// ❌ 错误写法List(){Column(){// 报错List 的子元素只能是 ListItem 或 ListItemGroup// ...}}// ✅ 正确写法List(){ListItem(){Column(){// ...}}}4.2 文本溢出处理当新闻标题过长时我们使用maxLines和textOverflow属性来控制显示行数和溢出后的省略号效果。Text(this.newsItem.title).maxLines(2)// 最大显示两行.textOverflow({overflow:TextOverflow.Ellipsis})// 超出显示省略号4.3Span组件的妙用在显示作者和发布时间时我们使用了Span组件包裹在Text组件内部。这样做的好处是样式统一Span可以继承父级Text组件的样式如字体大小、颜色。代码简洁如果写成两个独立的Text组件需要重复设置相同的样式属性。// ✅ 推荐写法使用 Span 组件Text(){Span(this.newsItem.author)Span( | )Span(this.newsItem.publishTime)}// ❌ 不推荐写法多个 Text 组件代码冗余Text(this.newsItem.author)Text( | )Text(this.newsItem.publishTime)五、总结通过本文的实战案例我们学习了如何在鸿蒙应用中使用List组件构建一个新闻列表。关键点总结如下List的子元素必须是ListItem或ListItemGroup。使用ForEach遍历数据数组动态渲染列表项。利用maxLines和textOverflow处理文本溢出。使用Span组件简化相同样式的文本布局。掌握了这些核心用法你就可以轻松应对各种列表场景的开发需求了。