HarmonyOS开发实战：小分享-FavoritesPage收藏页——分类Tab+List列表

发布时间：2026/8/15 2:47:07

HarmonyOS开发实战：小分享-FavoritesPage收藏页——分类Tab+List列表
前言欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net收藏页让用户查看已收藏的分享内容支持分类筛选和列表展示。小分享 App 的 FavoritesPage 使用List 组件实现列表配合分类 Tab 切换筛选内容。本篇讲解 List 与 ListItem 组件、Tab 下划线、State 选中态等核心实现。详细 API 可参考 HarmonyOS List 官方文档。一、FavoritesPage 完整代码1.1 页面完整实现import router from ohos.router; import { BottomTabBar } from ../components/BottomTabBar; import { FavoriteItem } from ../common/interfaces; Entry Component struct FavoritesPage { State selectedTab: number 0; private tabs: string[] [全部, 文字, 图片, 链接, 笔记]; private favorites: ArrayFavoriteItem [ { title: 生活的美好在于分享, subtitle: , time: 今天 10:30, type: 文字 }, { title: 山川湖海天地与爱。, subtitle: , time: 今天 09:15, type: 图片 }, { title: 10个提升效率的工具推荐, subtitle: , time: 昨天 21:30, type: 链接 }, { title: 读书笔记活着, subtitle: , time: 昨天 20:45, type: 笔记 } ]; build() { Column() { this.HeaderBar() this.CategoryTabs() this.FavoriteList() BottomTabBar({ currentIndex: 3 }) } .width(100%).height(100%).backgroundColor(#F5F5F5) } }1.2 Header 导航栏Row() { Text(‹).fontSize(24).fontColor(#1A1A1A).onClick(() { router.back() }) Text(我的收藏).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#1A1A1A).layoutWeight(1).textAlign(TextAlign.Center) Text().fontSize(20).fontColor(#666666) } .width(100%).padding({ left: 16, right: 16, top: 12, bottom: 12 }).backgroundColor(Color.White)二、List 与 ListItem2.1 基本结构List() { ForEach(this.favorites, (item: FavoriteItem, index: number) { ListItem() { this.FavoriteItemRow(item) } }, (item: FavoriteItem, index: number) ${item.title}_${index}) } .layoutWeight(1) .divider({ strokeWidth: 0.5, color: #F0F0F0 })2.2 List 优势对比维度ListScroll Column性能懒加载只渲染可见项一次性渲染所有分割线内置 divider 属性手动添加 Divider滑动优化流畅度基础滚动适用场景大量数据少量数据2.3 divider 分割线.divider({ strokeWidth: 0.5, color: #F0F0F0 })三、分类 Tab3.1 Tab 数组private tabs: string[] [全部, 文字, 图片, 链接, 笔记];3.2 Tab 选中下划线.border({ width: { bottom: 2 }, color: { bottom: this.selectedTab index ? #F5A623 : Color.Transparent } })四、收藏列表项4.1 列表项布局ListItem() { Row({ space: 12 }) { Column({ space: 6 }) { Text(item.title).fontSize(15).fontWeight(FontWeight.Medium).fontColor(#1A1A1A) .maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis }) Text(item.time).fontSize(12).fontColor(#999999) } .alignItems(HorizontalAlign.Start).layoutWeight(1) Text(⭐).fontSize(20) } .width(100%).padding({ left: 16, right: 16, top: 16, bottom: 16 }).backgroundColor(Color.White) }五、页面布局结构Column (主容器背景 #F5F5F5) ├─ Row (Header 导航栏白色背景) │ ├─ Text(‹) 返回 │ ├─ Text(我的收藏) 标题 │ └─ Text() 占位 ├─ Row (分类 Tab 栏) │ ├─ Text(全部) │ ├─ Text(文字) │ ├─ Text(图片) │ ├─ Text(链接) │ └─ Text(笔记) ├─ List (收藏列表) - layoutWeight(1) │ ├─ ListItem (收藏项 1) │ ├─ ListItem (收藏项 2) │ └─ ... └─ BottomTabBar (底部导航栏) - currentIndex: 3六、State 状态管理6.1 选中分类State selectedTab: number 0; .onClick(() { this.selectedTab index })七、完整代码文件索引文件路径说明pages/FavoritesPage.ets收藏页面common/interfaces.etsFavoriteItem 接口定义components/BottomTabBar.ets底部导航栏组件八、本文涉及的所有 APIAPI/组件用途文档链接List列表组件ListListItem列表项ListItemState状态管理State Guideborder()边框样式Borderrouter.back()返回RouterText文本组件TextBottomTabBar底部导航自定义组件总结本文详细讲解了 FavoritesPage 收藏页的分类 Tab 与 List 列表实现。核心知识点包括List 懒加载性能优于 ScrollColumn、divider 分割线内置属性简化代码、分类 Tab 切换border 下划线实现选中态、文字溢出省略maxLines(1)textOverflow(Ellipsis)。至此小分享 App 所有主页面和核心组件第 21-30 篇已全部讲解完毕。下一篇我们将开启第 31 篇 DiscoverPage 发现页的实现。附录收藏页的完整实现细节1. 完整的页面布局结构Column (主容器背景 #F5F5F5) ├─ Row (Header 导航栏白色背景) │ ├─ Text(‹) 返回 │ ├─ Text(我的收藏) 标题 │ └─ Text() 占位 ├─ Row (分类 Tab 栏白色背景) │ ├─ Text(全部) - 选中态 #F5A623 下划线 │ ├─ Text(文字) │ ├─ Text(图片) │ ├─ Text(链接) │ └─ Text(笔记) ├─ List (收藏列表) - layoutWeight(1) │ ├─ ListItem (收藏项 1) │ │ ├─ Column (标题 时间) │ │ └─ Text(⭐) │ ├─ ListItem (收藏项 2) │ └─ ... └─ BottomTabBar (底部导航栏) - currentIndex: 32. List 组件的完整实现List() { ForEach(this.favorites, (item: FavoriteItem, index: number) { ListItem() { Row({ space: 12 }) { Column({ space: 6 }) { Text(item.title).fontSize(15).fontWeight(FontWeight.Medium).fontColor(#1A1A1A) .maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis }) Text(item.time).fontSize(12).fontColor(#999999) } .alignItems(HorizontalAlign.Start).layoutWeight(1) Text(⭐).fontSize(20) } .width(100%).padding({ left: 16, right: 16, top: 16, bottom: 16 }).backgroundColor(Color.White) } }, (item: FavoriteItem, index: number) ${item.title}_${index}) } .layoutWeight(1) .divider({ strokeWidth: 0.5, color: #F0F0F0 })3. 分类 Tab 的完整实现Row({ space: 0 }) { ForEach(this.tabs, (item: string, index: number) { Column() { Text(item).fontSize(14) .fontColor(this.selectedTab index ? #F5A623 : #666666) .fontWeight(this.selectedTab index ? FontWeight.Bold : FontWeight.Normal) } .padding({ left: 16, right: 16, top: 12, bottom: 12 }) .border({ width: { bottom: 2 }, color: { bottom: this.selectedTab index ? #F5A623 : Color.Transparent } }) .onClick(() { this.selectedTab index }) }, (item: string, index: number) item) } .width(100%).backgroundColor(Color.White)4. 收藏页数据模型export interface FavoriteItem { title: string; subtitle: string; time: string; type: string; }5. List 与 Scroll 性能对比对比维度ListScroll Column渲染方式懒加载一次性渲染全部分割线内置 divider手动添加滑动性能优基础适用场景大量数据少量数据6. 完整代码文件索引文件路径说明pages/FavoritesPage.ets收藏页面common/interfaces.etsFavoriteItem 接口定义components/BottomTabBar.ets底部导航栏组件7. 本文涉及的所有 APIAPI/组件用途文档链接List列表组件ListListItem列表项ListItemState状态管理State Guideborder()边框样式Borderrouter.back()返回RouterText文本组件TextBottomTabBar底部导航自定义组件8. 实现要点总结收藏页的核心实现要点List 懒加载性能优于 ScrollColumndivider 分割线List 内置属性简化代码分类 Tab 切换border 下划线 State 选中态文字溢出省略maxLines(1)textOverflow(Ellipsis)底部导航集成 BottomTabBar 组件9. 总结本文详细讲解了 FavoritesPage 收藏页的完整实现。核心知识点包括List 懒加载性能优于 ScrollColumn、divider 分割线内置属性简化代码、分类 Tab 切换border 下划线实现选中态、文字溢出省略maxLines(1)textOverflow(Ellipsis)。至此小分享 App 所有主页面和核心组件第 21-30 篇已全部讲解完毕。附录收藏页的完整实现细节1. 完整的页面布局结构Column (主容器背景 #F5F5F5) ├─ Row (Header 导航栏白色背景) │ ├─ Text(‹) 返回 │ ├─ Text(我的收藏) 标题 │ └─ Text() 占位 ├─ Row (分类 Tab 栏白色背景) │ ├─ Text(全部) - 选中态 #F5A623 下划线 │ ├─ Text(文字) │ ├─ Text(图片) │ ├─ Text(链接) │ └─ Text(笔记) ├─ List (收藏列表) - layoutWeight(1) │ ├─ ListItem (收藏项 1) │ │ ├─ Column (标题 时间) │ │ └─ Text(⭐) │ ├─ ListItem (收藏项 2) │ └─ ... └─ BottomTabBar (底部导航栏) - currentIndex: 32. List 组件的完整实现List() { ForEach(this.favorites, (item: FavoriteItem, index: number) { ListItem() { Row({ space: 12 }) { Column({ space: 6 }) { Text(item.title) .fontSize(15) .fontWeight(FontWeight.Medium) .fontColor(#1A1A1A) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(item.time) .fontSize(12) .fontColor(#999999) } .alignItems(HorizontalAlign.Start) .layoutWeight(1) Text(⭐) .fontSize(20) } .width(100%) .padding({ left: 16, right: 16, top: 16, bottom: 16 }) .backgroundColor(Color.White) } }, (item: FavoriteItem, index: number) ${item.title}_${index}) } .layoutWeight(1) .divider({ strokeWidth: 0.5, color: #F0F0F0 })3. 分类 Tab 的完整实现Row({ space: 0 }) { ForEach(this.tabs, (item: string, index: number) { Column() { Text(item) .fontSize(14) .fontColor(this.selectedTab index ? #F5A623 : #666666) .fontWeight(this.selectedTab index ? FontWeight.Bold : FontWeight.Normal) } .padding({ left: 16, right: 16, top: 12, bottom: 12 }) .border({ width: { bottom: 2 }, color: { bottom: this.selectedTab index ? #F5A623 : Color.Transparent } }) .onClick(() { this.selectedTab index }) }, (item: string, index: number) item) } .width(100%) .backgroundColor(Color.White)4. FavoriteItem 数据模型export interface FavoriteItem { title: string; // 收藏标题 subtitle: string; // 副标题 time: string; // 收藏时间 type: string; // 类型文字/图片/链接/笔记 }5. 收藏列表数据标题时间类型生活的美好在于分享今天 10:30文字山川湖海天地与爱。今天 09:15图片10个提升效率的工具推荐昨天 21:30链接读书笔记活着昨天 20:45笔记6. List 与 Scroll 的性能对比对比维度ListScroll Column渲染方式懒加载只渲染可见项一次性渲染全部分割线内置divider属性手动添加 Divider滑动性能优优化流畅度基础滚动适用场景大量数据100 条少量数据 20 条7. 完整代码文件索引文件路径说明pages/FavoritesPage.ets收藏页面common/interfaces.etsFavoriteItem 接口定义components/BottomTabBar.ets底部导航栏组件8. 本文涉及的所有 APIAPI/组件用途文档链接List列表组件ListListItem列表项ListItemState状态管理State Guideborder()边框样式Borderrouter.back()返回RouterText文本组件TextBottomTabBar底部导航自定义组件9. 实现要点总结收藏页的核心实现要点List 懒加载性能优于 ScrollColumn适合大量数据divider 分割线List内置divider属性简化代码分类 Tab 切换border条件渲染下划线State控制选中态文字溢出省略maxLines(1)textOverflow(Ellipsis)底部导航集成BottomTabBar组件currentIndex: 3下一步优化方向集成Preferences实现收藏数据持久化添加滑动删除收藏项功能支持按分类筛选收藏列表如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力

相关新闻

Unity WebView插件实战指南：选型、集成与性能优化全解析

Unity WebView插件实战指南：选型、集成与性能优化全解析

1. 项目概述：为什么Unity开发者绕不开WebView？ 如果你是一个Unity开发者，无论是做手游、PC应用还是XR项目，大概率都遇到过这样一个需求：在3D游戏世界里，嵌入一个能流畅显示网页内容的界面。可能是用户协议、…

2026/8/13 21:09:35 阅读更多 →
UE5 Pak文件动态加载指南：用PakLoaderPlugin实现DLC与模组管理

UE5 Pak文件动态加载指南：用PakLoaderPlugin实现DLC与模组管理

1. 项目概述：为什么我们需要一个“DLC”加载器？如果你正在用UE5开发游戏，尤其是PC或主机平台的项目，迟早会遇到一个绕不开的需求：如何优雅地管理游戏发布后的额外内容？无论是修复Bug的热更新补丁&#xff0…

2026/8/12 15:39:27 阅读更多 →
OmniTalker：AI唇形同步技术解析与实践

OmniTalker：AI唇形同步技术解析与实践

1. 项目概述：OmniTalker如何解决唇形同步难题 上周测试团队发来一段AI生成的带货视频，画面中主播的嘴型明显比配音慢了半拍，评论区全是"这AI怕不是得了面瘫"的吐槽。这种音画不同步的"电子面瘫"现象，正是当前…

2026/8/8 13:27:22 阅读更多 →

最新新闻

深入理解C++函数：从内存模型到现代特性全面解析

深入理解C++函数：从内存模型到现代特性全面解析

1. 从“黑盒”到“白盒”：为什么我们需要深入理解C函数在C的世界里，函数可能是我们最早接触、也最频繁使用的概念。很多初学者，甚至一些有一定经验的开发者，往往把函数当作一个“黑盒”——知道输入什么，期待输出什么&…

2026/8/15 2:46:16 阅读更多 →
Ubuntu 22.04静态IP配置：Netplan实战指南与深度排错

Ubuntu 22.04静态IP配置：Netplan实战指南与深度排错

1. 项目概述：为什么静态IP是服务器和开发环境的基石最近在帮几个朋友配置新的Ubuntu服务器，发现一个挺普遍的现象：很多人第一次接触Linux服务器，尤其是Ubuntu 22.04 LTS这个长期支持版本时，对网络配置还是一头雾水。他…

2026/8/15 2:46:16 阅读更多 →
数学建模国赛B题实战：从问题转化到模型求解的完整策略

数学建模国赛B题实战：从问题转化到模型求解的完整策略

1. 从“烧脑”到“破局”：国赛B题的实战复盘与策略重构又到了一年一度的数学建模国赛季，后台和社群里关于“B题怎么破”的私信又开始刷屏了。作为从本科到研究生，带队拿过国一也当过国赛评委的老兵，我太理解大家面对B题时那种“题…

2026/8/15 2:46:16 阅读更多 →
《西游金蝉劫》新宇宙IP，未来10年到20年，会有一个IP系列，占据国内文创市场一半以上的利润，包含影视剧，文旅，衍生品，IP授权等等。《蝎子精·女妖王》《蝎子精·烈焰焚心》

《西游金蝉劫》新宇宙IP，未来10年到20年，会有一个IP系列，占据国内文创市场一半以上的利润，包含影视剧，文旅，衍生品，IP授权等等。《蝎子精·女妖王》《蝎子精·烈焰焚心》

未来10年到20年，会有一个IP系列，占据国内文创市场一半以上的利润，包含影视剧，文旅，衍生品，IP授权等等。 这个IP就是《西游金蝉劫》新宇宙。😁 我们发布这样的言论，不是为了搞笑&…

2026/8/15 2:46:16 阅读更多 →
碳化硅外延层厚度测量：红外干涉光谱与FFT技术详解

碳化硅外延层厚度测量：红外干涉光谱与FFT技术详解

1. 项目概述：从一道赛题到一项核心工艺的深度解析最近在准备一个关于碳化硅外延工艺的项目，恰好看到“国赛B题”这个标题，感觉一下子回到了当年打比赛的日子。这道题的核心是“碳化硅外延层厚度的确定”，看似是一个具体的测量问题…

2026/8/15 2:46:16 阅读更多 →
MathorCup数学建模竞赛：从选题策略到论文写作的实战指南

MathorCup数学建模竞赛：从选题策略到论文写作的实战指南

1. 选题前的底层逻辑：为什么“选对题”比“做对题”更重要每年一到MathorCup这类数学建模竞赛的报名季，我总能看到很多同学，尤其是第一次参赛的新手，把绝大部分精力都花在了学习算法、钻研代码上。这当然没错，但一个更…

2026/8/15 2:45:16 阅读更多 →

日新闻

内景 空间站内部 中国空间站 太空 内仓

内景 空间站内部 中国空间站 太空 内仓

本项目为前几天收费帮学妹做的一个项目，在工作环境中基本使用不到，但是很多学校把这个当作编程入门的项目来做，故分享出本项目供初学者参考。 一、项目描述 空间站内部 中国空间站 太空 内仓 地址：本地PC端运行（或Web…

2026/8/15 0:00:30 阅读更多 →
重新定义数据接口：3个突破性场景让通达信数据读取更智能

重新定义数据接口：3个突破性场景让通达信数据读取更智能

重新定义数据接口：3个突破性场景让通达信数据读取更智能 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx 当我们面对海量金融数据时，传统的数据获取方式往往让我们陷入困境—…

2026/8/15 0:00:30 阅读更多 →
一文读懂快消WMS怎么选？2026年国内外10大主流WMS品牌盘点

一文读懂快消WMS怎么选？2026年国内外10大主流WMS品牌盘点

快消品（FMCG）是流通速度较快、竞争较为激烈的行业之一。一瓶饮料从出厂到消费者手中，往往只有几十天甚至几天的周转窗口。这决定了快消行业的仓储管理系统（WMS）与制造业、电商行业存在明显区别：它不仅需要管…

2026/8/15 0:02:30 阅读更多 →

周新闻

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁 【免费下载链接】baidupankey 在线查询网盘提取码（维护中 rm repo） 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 你是否曾经在深夜寻找一份重要资料&#x…

2026/8/13 2:38:34 阅读更多 →
如何快速生成中国车牌图片：Python开源工具完整指南

如何快速生成中国车牌图片：Python开源工具完整指南

如何快速生成中国车牌图片：Python开源工具完整指南 【免费下载链接】chinese_license_plate_generator 中国车牌生成器 项目地址: https://gitcode.com/gh_mirrors/ch/chinese_license_plate_generator 中国车牌生成器是一个基于Python的开源项目&#xff0c…

2026/8/13 10:41:52 阅读更多 →
收藏！小白程序员轻松入门大模型，从Harness工程开始实践

收藏！小白程序员轻松入门大模型，从Harness工程开始实践

文章强调学习大模型不应只关注模型本身，而应重视模型外的系统搭建，即Harness。提出AgentModelHarness的实用公式，详细介绍Harness的四个层次：持久化层、执行层、控制层和观察与验证层。文章还探讨了上下文工程、工具设计、AGENTS.…

2026/8/13 10:41:51 阅读更多 →

月新闻

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在为百度网盘macOS版的龟速下…

2026/8/14 13:40:53 阅读更多 →
终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式文件无法在其他播放器播放而烦恼吗？ncmdump解密工具帮你轻松解决这个困…

2026/8/14 14:06:45 阅读更多 →
HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片：为英语学习 App 打造桌面级学习助手

HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片：为英语学习 App 打造桌面级学习助手

AgentCard 智能体卡片：为英语学习 App 打造桌面级学习助手适用平台：HarmonyOS 7.0 (API 26 Beta)一、引言 HarmonyOS 7.0（API 26 Beta）新增了 AgentCard 智能体卡片能力，这是继 HMAF（鸿蒙智能体框架&#x…

2026/8/15 2:35:29 阅读更多 →