前言欢迎加入开源鸿蒙跨平台社区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实现收藏数据持久化添加滑动删除收藏项功能支持按分类筛选收藏列表如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力