前言
本篇文章参考文章——【2025版 OpenHarmony】GitCode 口袋工具：Flutter + pull_to_refresh 组件封装与分页加载实现和【开源鸿蒙-基于Flutter搭建GitCode口袋工具-1】完成，如果没完成请移步到上一篇文章。【2025版 OpenHarmony】GitCode 口袋工具：Flutter + pull_to_refresh 组件封装与分页加载实现-CSDN博客
https://blog.csdn.net/2301_80035882/article/details/155129311?spm=1001.2014.3001.5501开源鸿蒙-基于Flutter搭建GitCode口袋工具-1-CSDN博客https://blog.csdn.net/qq_74796274/article/details/155093924?spm=1001.2014.3001.5501
一、概述
此项目基于上次的项目增加了自定义仓库列表卡片组件、自定义用户列表卡片组件、下拉刷新功能、上拉加载更多、数据分页管理。
自定义仓库列表卡片组件：
自定义用户列表卡片：
下拉刷新功能：
上拉加载更多：
数据分页（用户和仓库分页）：
二、使用指南
2.1 下载仓库压缩包
默认根据第一篇文章已经提前配置好了令牌
仓库地址：gitcode_pocket_tool - AtomGit | GitCode
如果你是拉下来这篇文章，只需要改变profile_page.dart文件。
姓名：在 lib/pages/main_navigation/profile_page.dart:9 ，可以将 '懿轩' 替换为自己的姓名。
//可以改掉'懿轩'，比如可以改为'幻影'
static const String name = '懿轩';GitCode 用户名 :在 lib/pages/main_navigation/profile_page.dart:10 ，将 '@byyixuan' 替换为自己的 GitCode 用户名。
//可以将这里的'@byyixuan'改成'@Deng666'
static const String gitcodeUsername = '@byyixuan';GitCode 地址 :在 lib/pages/main_navigation/profile_page.dart:11 ，将 'https://gitcode.com/byyixuan' 替换为自己的 GitCode 主页地址。
//可以把'https://gitcode.com/byyixuan'改成自己的GitCode地址
static const String gitcodeUrl = 'https://gitcode.com/byyixuan';CSDN 地址 :在 lib/pages/main_navigation/profile_page.dart:12 ，将 'https://blog.csdn.net/...' 替换为自己的 CSDN 或其他博客地址。
static const String csdnUrl = 'https://blog.csdn.net/2301_80035882?spm=1000.2115.3001.5343';个人简介 :在 lib/pages/main_navigation/profile_page.dart:13 ，替换为自己的个人简介。
static const String bio ='作为一名充满热情的全栈开发学习者，我专注于 Java、C++、Python 及华为鸿蒙（HarmonyOS）等技术栈的深入学习与实践。''在不断提升自身技术能力的同时，我致力于系统性地整理和分享学习资料、实践经验与项目成果，力求在精进自我的过程中赋能他人。';头像 : 在 lib/pages/main_navigation/profile_page.dart:19 定义了本地头像的路径,可以改为自己的。
static const String avatarUrl = 'assets/images/avatar.png';2.2 基于第一篇增加代码
只需要把拉下来的仓库，新增或者修改以下这些文件即可。
新增文件
lib/
├── widgets/
│ ├── repository_card.dart # 自定义仓库卡片组件
│ └── user_card.dart # 自定义用户卡片组件
└── pages/├── repository_list_page.dart # 仓库分页列表页面└── user_list_page.dart # 用户分页列表页面修改文件
lib/
└── main.dart # 主页面（集成新组件）
pubspec.yaml # 添加 pull_to_refresh 依赖完整文件结构
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 # 本文档2.3 实现效果
本篇文章基于2.2完成，接下来给大家看看完整的实现效果。
我的：
搜索：
首页：
仓库搜索：
用户搜索：
至此，本篇文章完结，感谢大家的观看。如果文章对你有博主，请给我点个赞吧~
