页面预览

收藏页分类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 发现页的实现。

相关资源

附录：收藏页的完整实现细节

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. 实现要点总结

收藏页的核心实现要点：

  1. List 懒加载：性能优于 Scroll+Column
  2. divider 分割线：List 内置属性简化代码
  3. 分类 Tab 切换：border 下划线 + @State 选中态
  4. 文字溢出省略：maxLines(1) + textOverflow(Ellipsis)
  5. 底部导航：集成 BottomTabBar 组件

9. 总结

本文详细讲解了 FavoritesPage 收藏页的完整实现。核心知识点包括：List 懒加载（性能优于 Scroll+Column）、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: 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. 实现要点总结

收藏页的核心实现要点：

  1. List 懒加载：性能优于 Scroll+Column，适合大量数据
  2. divider 分割线：List 内置 divider 属性，简化代码
  3. 分类 Tab 切换：border 条件渲染下划线，@State 控制选中态
  4. 文字溢出省略：maxLines(1) + textOverflow(Ellipsis)
  5. 底部导航：集成 BottomTabBar 组件，currentIndex: 3

下一步优化方向：

  • 集成 Preferences 实现收藏数据持久化
  • 添加滑动删除收藏项功能
  • 支持按分类筛选收藏列表

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

# 后端
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

HarmonyOS ArkTS API 24实现声明式 UI 框架与 @Builder 组件复用模式构建三标签页智能账单应用

在 HarmonyOS NEXT 正式商用的背景下，ArkTS 作为鸿蒙生态的官方应用开发语言，正在从传统的命令式 UI 开发范式向声明式 UI 范式全面迁移。ArkUI 框架以组件化、声明式、状态驱动为核心特征，要求开发者以"描述 UI 应该是什么样"而非"一步步操作 UI 怎么变"的思维方式构建界面。

avatar 人工智能6S服务平台

HarmonyOS ArkTS API 24实现声明式 UI 框架与 @Builder 组件复用模式构建三标签页智能账单应用

在 HarmonyOS NEXT 正式商用的背景下，ArkTS 作为鸿蒙生态的官方应用开发语言，正在从传统的命令式 UI 开发范式向声明式 UI 范式全面迁移。ArkUI 框架以组件化、声明式、状态驱动为核心特征，要求开发者以"描述 UI 应该是什么样"而非"一步步操作 UI 怎么变"的思维方式构建界面。

avatar 人工智能6S服务平台

# 鸿蒙ArkTS实战：每日名言应用 — 随机格言展示与卡片式UI设计

每日名言（Daily Quote）是移动端最常见的内容展示类应用之一。在鸿蒙生态中，利用 ArkTS 构建一款随机展示中国经典谚语/名言的轻应用，不仅可以检验开发者对数据管理、组件封装、动画过渡等核心概念的理解，还能通过精心设计的卡片式 UI 呈现优雅的阅读体验。// 名言数据类型id: number;// 唯一标识// 名言正文// 作者/出处// 分类：修身/处世/学习/励志// 渐变配色方案

avatar 人工智能6S服务平台