开源鸿蒙跨平台开发训练营--AtomGit(GitCode)口袋工具（六）-育师

获取代码仓库文件列表

如下图所示：我们先实现从网络获取文件列表的接口

该接口会返回文件列表集合。实例数据如下所示：

[ .gitignore, ArkTSCangjieHybridApp/.gitignore, ArkTSCangjieHybridApp/AppScope/resources/base/element/string.json, ArkTSCangjieHybridApp/AppScope/resources/base/media/app_icon.png, ArkTSCangjieHybridApp/README.md, ArkTSCangjieHybridApp/arkts_modules/shortvideoarkts/.gitignore, ArkTSCangjieHybridApp/arkts_modules/shortvideoarkts/Index.ets, ArkTSCangjieHybridApp/arkts_modules/shortvideoarkts/oh-package.json5, ]

1. 数据处理

首先我们需要创建一个GitCodeCodeRepo实体类，用来表示文件或者文件夹。根据上述返回的是数据列表，我们需要将每个文件、文件夹转换成对应的GitCodeCodeRepo实体类。所以我们需要做数据转换，将对应的字符串列表，转换成List<GitCodeCodeRepo>。

GitCodeCodeRepo我们先设计三个属性，如下所示：

name：文件名/文件夹名。
path：文件夹/文件的完整路径。
isDir: 是否是文件夹。

class GitCodeCodeRepo { final String name; // 文件名或文件夹名 final bool isDir; // 是否为文件夹 final String? path; // 完整路径 GitCodeCodeRepo({ required this.name, required this.isDir, this.path, }); }

然后我们在GitCodeCodeRepo中新建一个buildTreeFromPaths函数，专门用来解析数据，目的是将List<String>转换成List<GitCodeCodeRepo>。代码如下所示：

static List<GitCodeCodeRepo> buildTreeFromPaths(List<String> paths) { final List<GitCodeCodeRepo> rootNodes = []; // 遍历接口返回的所有文件路径 for (final path in paths) { // 将每个路径按照 "/" 进行分割。 final parts = path.split('/').where((part) => part.isNotEmpty).toList(); if (parts.isEmpty) continue; for (int i = 0; i < parts.length; i++) { // 获取文件名 String fileName = parts[i]; // 判断是不是文件夹 bool isDir = fileName.contains("."); GitCodeCodeRepo repo = GitCodeCodeRepo(name: fileName, isDir: isDir); rootNodes.add(repo); } } return rootNodes; }

文件和文件夹虽然显示出来了，但是我们发现数据有问题：所有的文件和文件夹都平铺在这个列表里，没有文件夹层次结构了。‘

因此我们继续修改，并且让当前列表只展示根目录下的文件或文件夹。

static List<GitCodeCodeRepo> buildTreeFromPathsTest(List<String> paths) { final Map<String, GitCodeCodeRepo> nodeMap = {}; final List<GitCodeCodeRepo> rootNodes = []; // 遍历接口返回的所有文件路径 for (final path in paths) { // 将每个路径按照 "/" 进行分割。 final parts = path.split('/').where((part) => part.isNotEmpty).toList(); if (parts.isEmpty) continue; String currentPath = ''; for (int i = 0; i < parts.length; i++) { final part = parts[i]; final isLastPart = i == parts.length - 1; // 这里修改了判断文件夹的逻辑 final isDir = isLastPart ? path.endsWith('/') : true; currentPath += '/$part'; // 对于文件夹，确保路径以斜杠结尾 final nodePath = isDir ? '$currentPath/' : currentPath; if (!nodeMap.containsKey(nodePath)) { final node = GitCodeCodeRepo( name: part, isDir: isDir, path: nodePath, ); nodeMap[nodePath] = node; // 如果是根节点（第一级），添加到根节点列表 if (i == 0) { rootNodes.add(node); } } } } return rootNodes; }

说明：为了提高用户体验，区分不同的 item。我们对每个 item 进行各行设置不同的背景色。

根目录显示成功，我们可以继续再优化一下。当前处理后的列表中，文件夹和文家是乱序的，我们需要将文件夹和文件进行排序，如果相同类型的文件或文件夹，则按照字母顺序排序。

// 在该函数中， return List 之前，先进行排序 rootNodes.sort((a, b) { // 文件夹排在前面 if (a.isDir && !b.isDir) return -1; if (!a.isDir && b.isDir) return 1; // 同类型按名称字母顺序排序 return a.name.compareTo(b.name); });

2. 界面跳转

当我们点击 item 后跳转到文件详情界面。目前先展示一些基本信息。文件具体的内容暂时先不展示。

// 点击跳转 Navigator.push( context, MaterialPageRoute( builder: (context) => ShowCodeDetailPage( repo: widget.repo, refName: refName, filePath: fullPath, node: node, fileTree: _fileTree, // 传递_fileTree数据 ), ), );

在文件详情界面我们展示一些基本信息，用于验证文件的正确性。如下图所示：仓库、分支正确，而且最重要的文件路径也显示正确。