欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

本人的学习灵感源自CSDN博主A懿轩A（附原文链接：https://blog.csdn.net/2301_80035882/article/details/155129311?spm=1001.2014.3001.5501）。原文章的核心框架极具参考和学习意义，我在此基础上学习到了功能拓展：新增用户卡片组件封装、优化主页面集成逻辑，并补充完整的迭代流程说明，所有内容均为个人实操总结，尊重原作者知识产权，特此标注。

本次学习基于上次的学习增加了自定义仓库列表卡片组件、自定义用户列表卡片组件、下拉刷新功能、上拉加载更多、数据分页管理。

1、首先在此处修改自己的信息

个性化信息修改指引

姓名：请在文件 `lib/pages/main_navigation/profile_page.dart` 的第9行，将默认值「懿轩」替换为您本人的姓名。

AtomGit用户名：请在文件 `lib/pages/main_navigation/profile_page.dart` 的第10行，将「@byyixuan」替换为您的AtomGit用户名。

AtomGit地址：请在文件 `lib/pages/main_navigation/profile_page.dart` 的第11行，将「https://atomgit.com/byyixuan」替换为您的GitCode个人主页地址。

CSDN地址：请在文件 `lib/pages/main_navigation/profile_page.dart` 的第12行，将「https://blog.csdn.net/...」替换为您的CSDN博客地址（或其他个人博客地址）。

个人简介：请在文件 `lib/pages/main_navigation/profile_page.dart` 的第13行，将默认内容替换为您的个人简介。

头像：文件 `lib/pages/main_navigation/profile_page.dart` 的第19行定义了本地头像的路径，您可将该路径修改为自己的头像文件路径。

2、基于初始版本扩展代码

只需在拉取的仓库中，按如下要求新增或修改对应文件即可完成功能扩展：

新增文件

plaintext

lib/

├── widgets/

│ ├── repository_card.dart # 自定义仓库卡片组件

│ └── user_card.dart # 自定义用户卡片组件

└── pages/

├── repository_list_page.dart # 仓库分页列表页面

└── user_list_page.dart # 用户分页列表页面

修改文件

plaintext

lib/

└── main.dart # 主页面（集成新增组件）

pubspec.yaml # 添加 pull_to_refresh 依赖

完整文件结构

plaintext

gitcode_pocket_tool/

├── lib/

│ ├── core/

│ │ ├── app_config.dart

│ │ └── gitcode_api.dart

│ ├── pages/

│ │ ├── repository_list_page.dart # 新增

│ │ └── user_list_page.dart # 新增

│ ├── widgets/

│ │ ├── repository_card.dart # 新增

│ │ └── user_card.dart # 新增

│ └── main.dart # 修改

├── pubspec.yaml # 修改

└── docs/

└── 组件封装与分页加载实现文档.md # 本文档

3、实现效果

自定义仓库列表卡片组件：

自定义用户列表卡片：

下拉刷新功能：

上拉加载更多：

数据分页（用户和仓库分页）：