本篇文章参考下面两位大佬文章 

https://blog.csdn.net/qq_74796274/article/details/155454493?spm=1001.2014.3001.5501

https://blog.csdn.net/2301_80035882/article/details/155129311?spm=1001.2014.3001.5501

本篇文章参考文章——【2025版 OpenHarmony】GitCode 口袋工具：Flutter + pull_to_refresh 组件封装与分页加载实现和《基于Flutter搭建GitCode口袋工具》完成，如果没完成请移步到上一篇文章。

上一篇文章链接

基于Flutter搭建GitCode口袋工具-CSDN博客

一、项目介绍

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

功能展示

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

1.2自定义用户列表卡片：

1.3下拉刷新功能：

1.4上拉加载更多：

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

二、使用指南

此处的环境是上一篇文章中已经下载完仓库的环境下继续搭建的

如果未下载仓库可以参考上一篇文章去下面链接下载仓库并配置好环境

下载仓库地址：https://gitcode.com/byyixuan/gitcode_pocket_tool?isLogin=1

下载完仓库并配置好环境之后开始一下步骤操作

2.1修改profile_page.dart文件

用vscode打开项目文件夹找到profile_page.dart文件

姓名：在 lib/pages/main_navigation/profile_page.dart:10 ，可以将 'noabandon' 替换为自己的姓名。

GitCode 用户名 :在 lib/pages/main_navigation/profile_page.dart:11 ，将 '@noabandon' 替换为自己的 GitCode 用户名。

GitCode 地址 :在 lib/pages/main_navigation/profile_page.dart:12 ，将 'https://gitcode.com/noabandon' 替换为自己的 GitCode 主页地址。

CSDN 地址 :在 lib/pages/main_navigation/profile_page.dart:13 ，将 'https://blog.csdn.net/2501_93826986?type=blog' 替换为自己的 CSDN 或其他博客地址。

个人简介 :在 lib/pages/main_navigation/profile_page.dart:14~16 ，替换为自己的个人简介。

头像 : 在 lib/pages/main_navigation/profile_page.dart:19~20 定义了本地头像的路径,可以改为自己的。

dart:19是自己电脑的本地路径

dart:20是绝对路径浏览器也能访问的那种

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完成，下来面给大家看看完整的实现效果。

我的：

搜索：

首页：

仓库搜索：

用户搜索：

至此，本篇文章内容完结，感谢大家的观看。如果文章对你有博主，请给我点个赞吧