网站线框建设一个网站需要条件

网站线框,建设一个网站需要条件,asp网站设置,建设银行官方网站下载安装我们继续接着上一章的内容#xff0c;完成文件内容的显示。显示文件内容1. 调整侧边栏内容上一章#xff0c;我们侧边栏只显示了根目录下的文件和文件夹。这一张我们要将其显示成一个可折叠和展开的文件树。目的是为了可以让用户在侧边栏中切换想要查看的文件。GitCodeCodeRe…我们继续接着上一章的内容完成文件内容的显示。显示文件内容1. 调整侧边栏内容上一章我们侧边栏只显示了根目录下的文件和文件夹。这一张我们要将其显示成一个可折叠和展开的文件树。目的是为了可以让用户在侧边栏中切换想要查看的文件。GitCodeCodeRepo这个类在上一章中我们设置了 name、isDir、path 三个属性。分别用来表示文件、文件夹的名称、是否是文件夹、完整路径。如果我们想要表示完整的文件树则还需要增加一个属性ListGitCodeCodeRepo children。用来表示当前文件夹下面的子文件/文件夹。如果当前文件夹是文件那么 children 为空即可。class GitCodeCodeRepo { final String name; // 文件名或文件夹名 final bool isDir; // 是否为文件夹 final ListGitCodeCodeRepo? children; // 子文件/文件夹列表 final String? path; // 完整路径 GitCodeCodeRepo({ required this.name, required this.isDir, this.children, this.path, }); }在上一章中我们没有给其添加 children接下来我们需要为文件列表构建父子关系。我们继续修改buildTreeFromPaths中的函数。static ListGitCodeCodeRepo buildTreeFromPathsTest(ListString paths) { final MapString, GitCodeCodeRepo nodeMap {}; final ListGitCodeCodeRepo 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(ListGitCodeCodeRepo 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 MapString, 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(MapString, 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: MapString, String.from(json[_links] ?? {}), ); } MapString, 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 图片是可以正常显示的。