SwiftUI：如何让带NavigationLink的List自定义单元格三点菜单可点击

1. 让三点菜单独立响应Popover，单元格不可点击 #

问题根源是NavigationLink默认会将整个单元格区域转化为导航触发区，导致点击任何位置都会跳转。解决核心是分离导航触发逻辑与单元格内容，推荐使用NavigationStack + .navigationDestination的组合，彻底摆脱NavigationLink对单元格的包裹：

struct ContentView: View {
    @State private var selectedItem: Item?
    @State private var showPopover = false
    @State private var targetItem: Item?
    
    let items: [Item] = [.init(name: "测试项1"), .init(name: "测试项2")]
    
    var body: some View {
        NavigationStack {
            List(items) { item in
                HStack {
                    // 单元格内容（不需要点击跳转的话，直接移除下面的onTapGesture即可）
                    Text(item.name)
                        .onTapGesture {
                            selectedItem = item
                        }
                    
                    Spacer()
                    
                    // 三点菜单按钮
                    Button {
                        targetItem = item
                        showPopover = true
                    } label: {
                        Image(systemName: "ellipsis.circle")
                    }
                    .popover(isPresented: $showPopover) {
                        Menu {
                            Button("编辑") { /* 执行编辑逻辑 */ }
                            Button("删除") { /* 执行删除逻辑 */ }
                        } label: {
                            Text("\(targetItem?.name ?? "")操作")
                        }
                    }
                }
            }
            // 绑定导航目标
            .navigationDestination(item: $selectedItem) { item in
                DetailView(item: item)
            }
            .navigationTitle("我的列表")
        }
    }
}

// 辅助结构
struct Item: Identifiable {
    let id = UUID()
    let name: String
}

struct DetailView: View {
    let item: Item
    var body: some View {
        Text("详情页：\(item.name)")
            .navigationTitle(item.name)
    }
}

这段代码中：

• 单元格本身不再被NavigationLink包裹，只有主动添加onTapGesture的区域才会触发跳转（移除onTapGesture后，单元格完全不可点击）
• 三点按钮是独立的交互元素，点击只会触发Popover，不会触发导航

2. 不使用.listRowInsets隐藏右侧Chevron #

如果坚持使用传统NavigationLink作为单元格内容，直接给NavigationLink添加.navigationLinkStyle(.plain)修饰符即可移除默认的右侧Chevron：

// 传统NavigationLink写法隐藏Chevron
NavigationLink(destination: DetailView(item: item)) {
    HStack {
        Text(item.name)
        Spacer()
        Button(/* 三点菜单按钮 */) { /* ... */ }
    }
}
.navigationLinkStyle(.plain)

但更推荐前面的.navigationDestination方案——这种方式下List单元格默认不会显示Chevron，从根源避免了Chevron的出现，同时逻辑更清晰。

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