SwiftUI：如何从路径列表创建文件系统树形视图及构建对应数据结构？

1. 定义树形节点数据结构 #

首先需要一个递归的Identifiable结构体，用来表示文件/目录节点：

struct FileNode: Identifiable {
    let id = UUID()
    var name: String
    var isDirectory: Bool
    var children: [FileNode] = []
}

• Identifiable是SwiftUI列表所需的协议，用UUID自动生成唯一标识
• isDirectory区分目录和文件，用于后续图标展示和排序
• children存储子节点，实现树形结构的递归特性

2. 将路径数组转换为树形结构 #

实现一个函数，把扁平的路径数组转换成嵌套的FileNode结构：

func buildFileTree(from paths: [String]) -> [FileNode] {
    var rootNodes: [FileNode] = []
    
    for path in paths {
        // 将路径按"/"拆分为层级组件
        let components = path.components(separatedBy: "/")
        var currentLevelNodes = rootNodes
        
        for (index, component) in components.enumerated() {
            // 检查当前层级是否已存在同名节点
            if let existingIndex = currentLevelNodes.firstIndex(where: { $0.name == component }) {
                // 标记最后一个组件是否为目录（根据路径后缀判断）
                if index == components.count - 1 {
                    currentLevelNodes[existingIndex].isDirectory = path.hasSuffix("/")
                }
                // 进入子节点层级
                currentLevelNodes = currentLevelNodes[existingIndex].children
            } else {
                // 判断当前组件是否为目录：非最后一个组件 或 路径末尾带"/"
                let isDir = index < components.count - 1 || path.hasSuffix("/")
                let newNode = FileNode(name: component, isDirectory: isDir)
                currentLevelNodes.append(newNode)
                
                // 如果不是最后一个组件，切换到新节点的子层级继续处理
                if index < components.count - 1 {
                    currentLevelNodes = [newNode]
                }
            }
        }
    }
    
    // 递归排序：目录优先，再按名称排序
    func sortNodes(_ nodes: inout [FileNode]) {
        nodes.sort {
            if $0.isDirectory == $1.isDirectory {
                return $0.name.localizedStandardCompare($1.name) == .orderedAscending
            }
            return $0.isDirectory
        }
        nodes.forEach { sortNodes(&$0.children) }
    }
    
    sortNodes(&rootNodes)
    return rootNodes
}

• 核心逻辑是逐个拆分路径，逐层插入节点，避免重复创建同名节点
• 排序逻辑保证目录排在文件前面，名称按本地化规则排序

3. 用SwiftUI List实现树形视图 #

利用SwiftUI的List自带的递归展开功能，实现树形展示：

struct FileTreeView: View {
    let nodes: [FileNode]
    
    var body: some View {
        List(nodes, children: \.children) { node in
            HStack(spacing: 8) {
                // 根据节点类型显示不同图标
                Image(systemName: node.isDirectory ? "folder.fill" : "doc.fill")
                    .foregroundColor(node.isDirectory ? .blue : .gray)
                Text(node.name)
            }
        }
        .listStyle(.sidebar)
    }
}

• List的children参数直接绑定节点的children数组，自动实现展开/折叠交互
• 用系统图标区分目录和文件，提升可读性

示例使用 #

假设你已经从ls -R解析得到路径数组，直接调用即可：

// 模拟解析后的路径数组（注意目录路径末尾加"/"）
let parsedPaths = [
    "Documents/Notes/2023.md",
    "Documents/Work/ProjectA.md",
    "Pictures/Vacation/Italy.jpg",
    "Pictures/Vacation/France.jpg",
    "Downloads/Setup.dmg",
    "Downloads/Temp/"
]

// 构建树形结构
let fileTree = buildFileTree(from: parsedPaths)

// 在View中展示
FileTreeView(nodes: fileTree)

注意事项 #

• 如果从ls -R解析输出，需要先处理格式：比如目录行末尾的冒号（如Documents:）要替换为Documents/，才能正确识别为目录
• 可以根据需求扩展FileNode，比如添加文件大小、修改时间等属性

内容的提问来源于stack exchange，提问作者MarcoT