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

我们继续接着上一章的内容，完成文件内容的显示。

显示文件内容

1. 调整侧边栏内容

上一章，我们侧边栏只显示了根目录下的文件和文件夹。这一张我们要将其显示成一个可折叠和展开的文件树。目的是为了可以让用户在侧边栏中切换想要查看的文件。

GitCodeCodeRepo这个类在上一章中，我们设置了 name、isDir、path 三个属性。分别用来表示文件、文件夹的名称、是否是文件夹、完整路径。如果我们想要表示完整的文件树，则还需要增加一个属性：List<GitCodeCodeRepo> children。用来表示当前文件夹下面的子文件/文件夹。如果当前文件夹是文件，那么 children 为空即可。

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

在上一章中，我们没有给其添加 children，接下来我们需要为文件列表构建父子关系。我们继续修改buildTreeFromPaths中的函数。

static List<GitCodeCodeRepo> buildTreeFromPathsTest(List<String> paths) { final Map<String, GitCodeCodeRepo> nodeMap = {}; final List<GitCodeCodeRepo> rootNodes = []; // 遍历接口返回的所有文件路径 for (final path in paths) { // 上一章的部分代码省略 String currentPath = ''; for (int i = 0; i < parts.length; i++) { // 上一章的部分代码省略 if (!nodeMap.containsKey(nodePath)) { final node = GitCodeCodeRepo( name: part, isDir: isDir, children: isDir ? [] : null,// 增加这一行 path: nodePath, ); nodeMap[nodePath] = node; } } } // 注意，在这里增加构建文件夹父子关系的代码 for (final entry in nodeMap.entries) { final path = entry.key; final node = entry.value; if (!node.isDir) continue; // 查找所有直接子节点 final parentParts = path.split('/').where((part) => part.isNotEmpty).toList(); for (final childEntry in nodeMap.entries) { final childPath = childEntry.key; final childNode = childEntry.value; // 跳过自身 if (childPath == path) continue; final childParts = childPath.split('/').where((part) => part.isNotEmpty).toList(); // 如果子路径的父路径部分与当前节点路径相同，则是直接子节点 if (childParts.length == parentParts.length + 1 && childParts.sublist(0, parentParts.length).join('/') == parentParts.join('/')) { node.children?.add(childNode); } } } // 排序代码也省略 return rootNodes; }

这样，增加父子关系后，我们的整个文件列表就成为一个树状结构，我们修改侧边栏的展示样式，如果是文件夹，并且有子文件\文件夹的话，则可以展开\折叠。否则无法展开\折叠，或者如果所示文件的话，也无法展开和折叠。

其次，侧边栏也增加点击事件，如果点击的是文件夹，则展开当前文件夹，如果点击的是文件，则让右侧主内容区域显示当前点击的文件内容(还未实现)。

当我们点击某个 item 后，进入到文件详情页，展示的样式如下所示：

如上图所示。我们的子文件和文件夹已经添加成功，而且也可以正常展示，但是还是存在一个优化问题，就是排序问题。我们依然遵循文件夹优先其次文件的排序，然后同类型的遵循字母规则来排序。

我们在buildTreeFromPaths里增加对子文件和文件夹排序的方法，如下代码所示。

// 对所有节点进行排序，确保文件夹在前，文件在后，同类型按字母顺序 // 首先递归排序所有子节点 void sortNodesRecursively(List<GitCodeCodeRepo> nodes) { for (final node in nodes) { // 如果是文件夹且有子节点，先递归排序子节点 if (node.isDir && node.children != null && node.children!.isNotEmpty) { sortNodesRecursively(node.children!); // 然后对当前节点的子节点进行排序 node.children!.sort((a, b) { // 文件夹排在前面 if (a.isDir && !b.isDir) return -1; if (!a.isDir && b.isDir) return 1; // 同类型按名称字母顺序排序 return a.name.compareTo(b.name); }); } } } // 先递归排序所有层级的子节点 sortNodesRecursively(rootNodes);

排序后的截图如下所示：

2. 主内容区域展示内容

我们侧边栏的内容已经完成。现在需要实现主内容区域展示文件内容。要展示文件内容，我们首先需要获取通过文件内容的接口来获取文件内容。

class GitCodeCodeContentRepo { final String type; final String encoding; final int size; final String name; final String path; final String content; final String sha; final String url; final String htmlUrl; final String downloadUrl; final Map<String, String> links; GitCodeCodeContentRepo({ required this.type, required this.encoding, required this.size, required this.name, required this.path, required this.content, required this.sha, required this.url, required this.htmlUrl, required this.downloadUrl, required this.links, }); factory GitCodeCodeContentRepo.fromJson(Map<String, dynamic> json) { return GitCodeCodeContentRepo( type: json['type'] ?? '', encoding: json['encoding'] ?? '', size: json['size'] ?? 0, name: json['name'] ?? '', path: json['path'] ?? '', content: json['content'] ?? '', sha: json['sha'] ?? '', url: json['url'] ?? '', htmlUrl: json['html_url'] ?? '', downloadUrl: json['download_url'] ?? '', links: Map<String, String>.from(json['_links'] ?? {}), ); } Map<String, dynamic> toJson() { return { 'type': type, 'encoding': encoding, 'size': size, 'name': name, 'path': path, 'content': content, 'sha': sha, 'url': url, 'html_url': htmlUrl, 'download_url': downloadUrl, '_links': links, }; } @override String toString() { return 'GitCodeCodeContentRepo{type: $type, encoding: $encoding, size: $size, name: $name, path: $path, sha: $sha}'; } }

我们这里暂时只区分图片和文件。图片包括 png、jpg、gif 等格式，文件包括文本文件、代码文件、markdown 文档等文件。由于接口返回的无论是图片还是文件，都是以 Base64 格式返回的，所以我们判断，如果是图片文件，则以 base64 格式加载图片文件，否则就解码 base64，然后展示文件内容。我们先加载图片。

// 以 base64 方式加载图片 Image.memory( base64Decode(content), fit: BoxFit.contain, ),

3. 高亮显示代码

这里我们借助第三方的库来高亮显示代码。flutter_highlight三方库支持各种语言的高亮。我们就使用这个三方库。

// 在 pubspec.yaml 中增加如下依赖 flutter_highlight: ^0.7.0 highlight: ^0.7.0 // flutter_highlight使用 HighlightView( 文件内容, language: 语言, theme: 主题样式 )

我们测试打开 .ets 文件看是否能显示

这个是 markdown、json 文件

我们测试一下图片，如下所示，gif 图片是可以正常显示的。