SwiftUI递归列表中ContextMenu无法正常工作的问题排查

问题场景 #

将Java程序移植到SwiftUI，实现左侧导航树+右侧详情的布局，需要给导航树节点添加ContextMenu（根据节点类型显示不同操作），但当前代码中的ContextMenu无法正常触发。

问题根源 #

1. 列表级多选ContextMenu不匹配需求：原代码使用.contextMenu(forSelectionType:)，该修饰符针对多选批量操作，需要配合EditMode才能生效，而当前场景是单个节点的操作，不适用。
2. NavigationLink拦截手势：列表项中的NavigationLink会优先响应长按手势，导致节点的ContextMenu无法触发。
3. Tree类的Equatable/Hashable实现错误：原代码用value判断节点相等，若存在重复value的节点会导致选择和识别混乱。

修复方案 #

1. 修正Tree类的身份识别 #

给Tree类添加唯一UUID作为身份标识，确保Equatable和Hashable的正确性：

import SwiftUI

class Tree<Value: Hashable>: Hashable {
    let id = UUID() // 唯一标识
    var value: Value
    var icon: String?
    var children: [Tree]?

    // 直接接收Value类型，避免强制转换
    init(value: Value, icon: String? = nil, children: [Tree]? = nil) {
        self.value = value
        self.icon = icon
        self.children = children
    }

    static func == (lhs: Tree<Value>, rhs: Tree<Value>) -> Bool {
        lhs.id == rhs.id // 用UUID判断相等
    }

    func hash(into hasher: inout Hasher) {
        hasher.combine(id) // 用UUID生成哈希值
    }
}

2. 给单个节点添加ContextMenu #

将ContextMenu直接绑定到列表项的Label上，避免被NavigationLink拦截，同时根据节点类型动态显示操作：

struct ContentView: View {
    // 单选场景用Optional替代Set，更符合导航逻辑
    @State var selectedNode: Tree<String>?

    var body: some View {
        NavigationView {
            List(treeNodes, id: \.id, children: \.children, selection: $selectedNode) { node in
                NavigationLink(tag: node, selection: $selectedNode) {
                    TabView {
                        Tab("详情1", image: "Block") {
                            Text(node.value)
                        }
                        Tab("详情2", image: "Haus") {
                            Text(node.value)
                        }
                    }
                } label: {
                    Label(node.value, image: node.icon!)
                        .contextMenu {
                            // 根据节点类型显示不同操作
                            switch node.value {
                            case "Root":
                                Button("根节点专属操作") {}
                            case let val where val.contains("House"):
                                Button("房屋信息编辑") {}
                                Button("添加子公寓") {}
                            case let val where val.contains("Apartment"):
                                Button("公寓租户管理") {}
                            default:
                                Button("通用操作") {}
                            }
                            // 通用操作选项
                            Divider()
                            Button("删除节点", role: .destructive) {}
                        }
                }
            }
            .listStyle(SidebarListStyle())
            .navigationTitle("导航树")
        }
    }
}

#Preview {
    ContentView()
}

3. 修正示例数据初始化 #

由于Tree类的init参数修改，调整示例数据的创建方式：

// 示例数据
let treeNodes: [Tree<String>] = [
    Tree(
        value: "Root", icon: "Block",
        children: [
            Tree(value: "House 1", icon: "Haus"),
            Tree(value: "House 2", icon: "Haus"),
            Tree(
                value: "House 3", icon: "Haus",
                children: [
                    Tree(value: "Apartment 1", icon: "Wohnung"),
                    Tree(value: "Apartment 2", icon: "Wohnung")
                ]
            )
        ]
    )
]

关键修改说明 #

• 改用单选状态selectedNode: Tree<String>?，更贴合导航树选择单个节点查看详情的场景。
• 将ContextMenu绑定到Label上，确保长按节点时能直接触发，不会被NavigationLink的手势覆盖。
• Tree类通过UUID保证节点身份唯一，避免重复value导致的选择错误。
• 根据节点value动态生成ContextMenu选项，满足不同类型节点的操作需求。

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