做网站需要什么语言网站配资公司网站

做网站需要什么语言,网站配资公司网站,WordPress云媒体库,网站的后台地址获取代码仓库文件列表如下图所示#xff1a;我们先实现从网络获取文件列表的接口该接口会返回文件列表集合。实例数据如下所示#xff1a;[.gitignore, ArkTSCangjieHybridApp/.gitignore, ArkTSCangjieHybridApp/AppScope/resources/base/element/string.json, ArkTSCangjie…获取代码仓库文件列表如下图所示我们先实现从网络获取文件列表的接口该接口会返回文件列表集合。实例数据如下所示[ .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实体类。所以我们需要做数据转换将对应的字符串列表转换成ListGitCodeCodeRepo。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函数专门用来解析数据目的是将ListString转换成ListGitCodeCodeRepo。代码如下所示static ListGitCodeCodeRepo buildTreeFromPaths(ListString paths) { final ListGitCodeCodeRepo 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 ListGitCodeCodeRepo buildTreeFromPathsTest(ListString paths) { final MapString, GitCodeCodeRepo nodeMap {}; final ListGitCodeCodeRepo 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数据 ), ), );在文件详情界面我们展示一些基本信息用于验证文件的正确性。如下图所示仓库、分支正确而且最重要的文件路径也显示正确。3. 侧边栏实现由于文件夹和文件列表以及文件具体内容展示区域都非常占用空间所以我们将文件夹和文件列表使用侧边栏来展示并且侧边栏是悬浮状态。而且由于我们将处理过后的文件列表数据传递过去了也顺便在侧边栏中展示出来。核心区域我们做一个判断如果用户点击的 item 是文件夹进入当前页面则核心区域不展示内容。如果用户点击的是 item 是文件则展示当前文件内容先不实现。