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: Array<FavoriteItem> = [
{ 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 与 ListItem
2.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 优势
| 对比维度 | List | Scroll + Column |
|---|---|---|
| 性能 | 懒加载，只渲染可见项 | 一次性渲染所有 |
| 分割线 | 内置 divider 属性 | 手动添加 Divider |
| 滑动 | 优化流畅度 | 基础滚动 |
| 适用场景 | 大量数据 | 少量数据 |
2.3 divider 分割线
.divider({ strokeWidth: 0.5, color: '#F0F0F0' })
三、分类 Tab
3.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.ets |
FavoriteItem 接口定义 |
components/BottomTabBar.ets |
底部导航栏组件 |
八、本文涉及的所有 API
| API/组件 | 用途 | 文档链接 |
|---|---|---|
List |
列表组件 | List |
ListItem |
列表项 | ListItem |
@State |
状态管理 | State Guide |
border() |
边框样式 | Border |
router.back() |
返回 | Router |
Text |
文本组件 | Text |
BottomTabBar |
底部导航 | 自定义组件 |
总结
本文详细讲解了 FavoritesPage 收藏页的分类 Tab 与 List 列表实现。核心知识点包括：List 懒加载（性能优于 Scroll+Column）、divider 分割线（内置属性简化代码）、分类 Tab 切换（border 下划线实现选中态）、文字溢出省略（maxLines(1) + textOverflow(Ellipsis)）。至此，小分享 App 所有主页面和核心组件（第 21-30 篇）已全部讲解完毕。下一篇我们将开启第 31 篇 DiscoverPage 发现页的实现。
相关资源
- HarmonyOS List 官方文档：List Reference
- HarmonyOS ListItem 组件：ListItem Reference
- HarmonyOS Router 路由：Router API
- HarmonyOS @State 装饰器：@State Guide
- HarmonyOS border 属性：Border Attribute
- HarmonyOS Text 组件：Text Reference
- HarmonyOS 文字溢出：Text Overflow
- 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
附录：收藏页的完整实现细节
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: 3
2. 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 性能对比
| 对比维度 | List | Scroll + Column |
|---|---|---|
| 渲染方式 | 懒加载 | 一次性渲染全部 |
| 分割线 | 内置 divider | 手动添加 |
| 滑动性能 | 优 | 基础 |
| 适用场景 | 大量数据 | 少量数据 |
6. 完整代码文件索引
| 文件路径 | 说明 |
|---|---|
pages/FavoritesPage.ets |
收藏页面 |
common/interfaces.ets |
FavoriteItem 接口定义 |
components/BottomTabBar.ets |
底部导航栏组件 |
7. 本文涉及的所有 API
| API/组件 | 用途 | 文档链接 |
|---|---|---|
List |
列表组件 | List |
ListItem |
列表项 | ListItem |
@State |
状态管理 | State Guide |
border() |
边框样式 | Border |
router.back() |
返回 | Router |
Text |
文本组件 | Text |
BottomTabBar |
底部导航 | 自定义组件 |
8. 实现要点总结
收藏页的核心实现要点：
- List 懒加载：性能优于 Scroll+Column
- divider 分割线：List 内置属性简化代码
- 分类 Tab 切换：border 下划线 + @State 选中态
- 文字溢出省略：
maxLines(1)+textOverflow(Ellipsis) - 底部导航：集成 BottomTabBar 组件
9. 总结
本文详细讲解了 FavoritesPage 收藏页的完整实现。核心知识点包括：List 懒加载（性能优于 Scroll+Column）、divider 分割线（内置属性简化代码）、分类 Tab 切换（border 下划线实现选中态）、文字溢出省略（maxLines(1) + textOverflow(Ellipsis)）。至此，小分享 App 所有主页面和核心组件（第 21-30 篇）已全部讲解完毕。
相关资源
- HarmonyOS List 官方文档：List Reference
- HarmonyOS ListItem 组件：ListItem Reference
- HarmonyOS Router 路由：Router API
- HarmonyOS @State 装饰器：@State Guide
- HarmonyOS border 属性：Border Attribute
- HarmonyOS Text 组件：Text Reference
- HarmonyOS 文字溢出：Text Overflow
- 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
附录：收藏页的完整实现细节
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: 3
2. 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 的性能对比
| 对比维度 | List | Scroll + Column |
|---|---|---|
| 渲染方式 | 懒加载（只渲染可见项） | 一次性渲染全部 |
| 分割线 | 内置 divider 属性 |
手动添加 Divider |
| 滑动性能 | 优（优化流畅度） | 基础滚动 |
| 适用场景 | 大量数据（100+ 条） | 少量数据（< 20 条） |
7. 完整代码文件索引
| 文件路径 | 说明 |
|---|---|
pages/FavoritesPage.ets |
收藏页面 |
common/interfaces.ets |
FavoriteItem 接口定义 |
components/BottomTabBar.ets |
底部导航栏组件 |
8. 本文涉及的所有 API
| API/组件 | 用途 | 文档链接 |
|---|---|---|
List |
列表组件 | List |
ListItem |
列表项 | ListItem |
@State |
状态管理 | State Guide |
border() |
边框样式 | Border |
router.back() |
返回 | Router |
Text |
文本组件 | Text |
BottomTabBar |
底部导航 | 自定义组件 |
9. 实现要点总结
收藏页的核心实现要点：
- List 懒加载：性能优于 Scroll+Column，适合大量数据
- divider 分割线：
List内置divider属性，简化代码 - 分类 Tab 切换：
border条件渲染下划线，@State控制选中态 - 文字溢出省略：
maxLines(1)+textOverflow(Ellipsis) - 底部导航：集成
BottomTabBar组件，currentIndex: 3
下一步优化方向：
- 集成
Preferences实现收藏数据持久化 - 添加滑动删除收藏项功能
- 支持按分类筛选收藏列表
如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
4
0- 0
已为社区贡献36条内容
所有评论(0)