开源鸿蒙-基于Flutter搭建GitCode口袋工具-2

前言

本篇文章参考文章------【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 ，可以将 '懿轩' 替换为自己的姓名。

Dart 复制代码

//可以改掉'懿轩'，比如可以改为'幻影'
static const String name = '懿轩';

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

Dart 复制代码

//可以将这里的'@byyixuan'改成'@Deng666'
static const String gitcodeUsername = '@byyixuan';

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

Dart 复制代码

//可以把'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 或其他博客地址。

Dart 复制代码

static const String csdnUrl = 'https://blog.csdn.net/2301_80035882?spm=1000.2115.3001.5343';

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

Dart 复制代码

static const String bio = 
    '作为一名充满热情的全栈开发学习者，我专注于 Java、C++、Python 及华为鸿蒙（HarmonyOS）等技术栈的深入学习与实践。'
    '在不断提升自身技术能力的同时，我致力于系统性地整理和分享学习资料、实践经验与项目成果，力求在精进自我的过程中赋能他人。';

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

Dart 复制代码

static const String avatarUrl = 'assets/images/avatar.png';

2.2 基于第一篇增加代码

只需要把拉下来的仓库，新增或者修改以下这些文件即可。

新增文件

Dart 复制代码

lib/
├── widgets/
│   ├── repository_card.dart          # 自定义仓库卡片组件
│   └── user_card.dart                # 自定义用户卡片组件
└── pages/
    ├── repository_list_page.dart     # 仓库分页列表页面
    └── user_list_page.dart           # 用户分页列表页面

修改文件

Dart 复制代码

lib/
└── main.dart                          # 主页面（集成新组件）
 
pubspec.yaml                           # 添加 pull_to_refresh 依赖

完整文件结构

Dart 复制代码

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

我的：

搜索：

首页：

仓库搜索：

用户搜索：

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