南京網(wǎng)絡推廣網(wǎng)站,c2c的特點有哪些,網(wǎng)站根目錄有哪些,網(wǎng)上商城加盟我們繼續(xù)接著上一章的內(nèi)容#xff0c;完成文件內(nèi)容的顯示。顯示文件內(nèi)容1. 調(diào)整側邊欄內(nèi)容上一章#xff0c;我們側邊欄只顯示了根目錄下的文件和文件夾。這一張我們要將其顯示成一個可折疊和展開的文件樹。目的是為了可以讓用戶在側邊欄中切換想要查看的文件。GitCodeCodeRe…我們繼續(xù)接著上一章的內(nèi)容完成文件內(nèi)容的顯示。顯示文件內(nèi)容1. 調(diào)整側邊欄內(nèi)容上一章我們側邊欄只顯示了根目錄下的文件和文件夾。這一張我們要將其顯示成一個可折疊和展開的文件樹。目的是為了可以讓用戶在側邊欄中切換想要查看的文件。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接下來我們需要為文件列表構建父子關系。我們繼續(xù)修改buildTreeFromPaths中的函數(shù)。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; // 查找所有直接子節(jié)點 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(); // 如果子路徑的父路徑部分與當前節(jié)點路徑相同則是直接子節(jié)點 if (childParts.length parentParts.length 1 childParts.sublist(0, parentParts.length).join(/) parentParts.join(/)) { node.children?.add(childNode); } } } // 排序代碼也省略 return rootNodes; }這樣增加父子關系后我們的整個文件列表就成為一個樹狀結構我們修改側邊欄的展示樣式如果是文件夾并且有子文件文件夾的話則可以展開折疊。否則無法展開折疊或者如果所示文件的話也無法展開和折疊。其次側邊欄也增加點擊事件如果點擊的是文件夾則展開當前文件夾如果點擊的是文件則讓右側主內(nèi)容區(qū)域顯示當前點擊的文件內(nèi)容(還未實現(xiàn))。當我們點擊某個 item 后進入到文件詳情頁展示的樣式如下所示如上圖所示。我們的子文件和文件夾已經(jīng)添加成功而且也可以正常展示但是還是存在一個優(yōu)化問題就是排序問題。我們依然遵循文件夾優(yōu)先其次文件的排序然后同類型的遵循字母規(guī)則來排序。我們在buildTreeFromPaths里增加對子文件和文件夾排序的方法如下代碼所示。// 對所有節(jié)點進行排序確保文件夾在前文件在后同類型按字母順序 // 首先遞歸排序所有子節(jié)點 void sortNodesRecursively(ListGitCodeCodeRepo nodes) { for (final node in nodes) { // 如果是文件夾且有子節(jié)點先遞歸排序子節(jié)點 if (node.isDir node.children ! null node.children!.isNotEmpty) { sortNodesRecursively(node.children!); // 然后對當前節(jié)點的子節(jié)點進行排序 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); }); } } } // 先遞歸排序所有層級的子節(jié)點 sortNodesRecursively(rootNodes);排序后的截圖如下所示2. 主內(nèi)容區(qū)域展示內(nèi)容我們側邊欄的內(nèi)容已經(jīng)完成。現(xiàn)在需要實現(xiàn)主內(nèi)容區(qū)域展示文件內(nèi)容。要展示文件內(nèi)容我們首先需要獲取通過文件內(nèi)容的接口來獲取文件內(nèi)容。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}; } }我們這里暫時只區(qū)分圖片和文件。圖片包括 png、jpg、gif 等格式文件包括文本文件、代碼文件、markdown 文檔等文件。由于接口返回的無論是圖片還是文件都是以 Base64 格式返回的所以我們判斷如果是圖片文件則以 base64 格式加載圖片文件否則就解碼 base64然后展示文件內(nèi)容。我們先加載圖片。// 以 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( 文件內(nèi)容, language: 語言, theme: 主題樣式 )我們測試打開 .ets 文件看是否能顯示這個是 markdown、json 文件我們測試一下圖片如下所示gif 圖片是可以正常顯示的。