SwiftUI中解决NavigationLink覆盖DisclosureGroup点击手势的问题

这个问题我做项目的时候也踩过坑！核心原因就是NavigationLink会默认吞噬父视图的点击手势，导致你点DisclosureGroup的任何地方都触发了导航，而不是展开折叠内容。给你两种实用的解决思路，按需选择就好：

方法一：用Button+navigationDestination拆分逻辑（推荐） #

这种方法利用SwiftUI的现代导航API，把导航和DisclosureGroup的展开逻辑完全分开，从根源上避免手势冲突。修改后的代码如下：

import SwiftUI

struct ContentView: View {
    var items = [1, 2]
    // 用状态变量记录选中的item，控制详情页跳转
    @State private var selectedItem: Int? = nil
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(items, id: \.self) { item in
                    DisclosureGroup(content: {
                        Text("Extra content for item \(item)")
                    }, label: {
                        HStack {
                            // 把原来的NavigationLink换成普通Button
                            Button("View Details") {
                                selectedItem = item
                            }
                            .buttonStyle(.borderless)
                            // 用Spacer占满剩余空间，让DisclosureGroup的点击区域覆盖除按钮外的所有地方
                            Spacer()
                        }
                    })
                }
            }
            // 通过navigationDestination响应导航请求
            .navigationDestination(item: $selectedItem) { selectedItem in
                DetailView(item: selectedItem)
            }
        }
    }
}

// 可以给DetailView传入选中的item参数（按需调整）
struct DetailView: View {
    let item: Int
    var body: some View {
        Text("Detail page for item \(item)")
            .navigationTitle("Item Detail")
    }
}

为什么推荐这个方法？ #

• 逻辑清晰：导航和折叠展开完全独立，不会出现手势抢注的问题
• 扩展性强：能轻松给详情页传递选中的item参数，比原来的写法灵活
• 符合设计趋势：NavigationStack+navigationDestination是苹果推荐的现代导航方式

方法二：手动管理展开状态（适合坚持用内嵌NavigationLink的场景） #

如果你一定要保留原来的NavigationLink写法，可以手动控制DisclosureGroup的展开状态，同时限制NavigationLink的点击范围：

import SwiftUI

struct ContentView: View {
    var items = [1, 2]
    // 用Set记录哪些item是展开状态
    @State private var expandedItems: Set<Int> = []
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(items, id: \.self) { item in
                    // 绑定展开状态到Set
                    DisclosureGroup(isExpanded: $expandedItems.contains(item), content: {
                        Text("Extra content for item \(item)")
                    }, label: {
                        HStack {
                            NavigationLink {
                                DetailView()
                            } label: {
                                Text("View Details")
                            }
                            .buttonStyle(.borderless)
                            // 限制NavigationLink的点击区域仅为自身文本范围
                            .contentShape(Rectangle())
                            Spacer()
                        }
                        // 给label添加tap手势，手动切换展开状态
                        .onTapGesture {
                            if expandedItems.contains(item) {
                                expandedItems.remove(item)
                            } else {
                                expandedItems.insert(item)
                            }
                        }
                    })
                }
            }
        }
    }
}

这种方法需要手动维护展开状态的集合，虽然能解决问题，但代码复杂度比第一种高，所以更推荐第一种方案。

备注：内容来源于stack exchange，提问作者Matthew Fennell