列表项内嵌套于NavigationLink的Button点击异常问题

核心问题是你把Button嵌套在NavigationLink中，而List的行默认会将NavigationLink的可点击区域扩展到整行。下面提供两种适配不同iOS版本的解决思路：

方案一：iOS 16+ 推荐（使用navigationDestination） #

利用NavigationStack的navigationDestinationAPI，通过按钮动作触发跳转，完全控制点击范围：

1. 修改列表视图（NodeList） #

添加导航路径状态，并绑定到NavigationStack，同时配置跳转目标：

struct NodeList: View {
    @State private var navigationPath = NavigationPath() // 新增导航路径
    // 其他原有属性：nodes、bleManager等
    
    var body: some View {
        NavigationStack(path: $navigationPath) { // 绑定路径
            List(nodes, id: \.self) { node in
                NodeListItem(node: node, navigationPath: $navigationPath) // 传递路径绑定
                    .contextMenu {
                        // 原有上下文菜单代码不变
                        Button {
                            node.user?.mute = !(node.user?.mute ?? false) // 替换强制解包
                        } label: {
                            Label(node.user?.mute == true ? "Show DM Alerts" : "Hide DM Alerts", 
                                  systemImage: node.user?.mute == true ? "bell" : "bell.slash")
                        }
                        
                        if bleManager.connectedPeripheral != nil {
                            Button (role: .destructive) {
                                deleteNodeId = node.num
                                isPresentingDeleteNodeAlert = true
                            } label: {
                                Label("Delete Node", systemImage: "trash")
                            }
                        }
                    }
            }
            .listStyle(.plain)
            .navigationDestination(for: User.self) { user in // 配置跳转目标
                UserMessageList(user: user)
            }
        }
    }
}

2. 修改列表项视图（NodeListItem） #

移除嵌套的NavigationLink，直接用按钮触发路径跳转：

struct NodeListItem: View {
    let node: Node
    @Binding var navigationPath: NavigationPath // 接收路径绑定
    
    var body: some View {
        LazyVStack(alignment: .leading) {
            // 原有其他内容不变
            HStack {
                Button("DM") {
                    if let user = node.user { // 安全解包，避免崩溃
                        navigationPath.append(user)
                    }
                }
                .buttonStyle(.borderedProminent) // 保留你想要的按钮样式
            }
        }
    }
}

方案二：兼容iOS 15及以下（使用isActive绑定） #

通过隐藏的NavigationLink配合状态变量，实现按钮触发跳转：

修改列表项视图（NodeListItem） #

struct NodeListItem: View {
    let node: Node
    @State private var isNavigating = false // 跳转状态
    
    var body: some View {
        LazyVStack(alignment: .leading) {
            // 原有其他内容不变
            HStack {
                Button("DM") {
                    if node.user != nil {
                        isNavigating = true
                    }
                }
                .buttonStyle(.borderedProminent)
                
                // 隐藏的NavigationLink，仅通过状态触发跳转
                NavigationLink(destination: UserMessageList(user: node.user!), isActive: $isNavigating) {
                    EmptyView()
                }
                .hidden()
                .buttonStyle(.plain) // 确保不扩展点击区域
            }
        }
    }
}

关键注意事项 #

• 避免强制解包node.user!，改用if let或guard let处理可选值，防止空值崩溃
• 两种方案都能确保只有按钮区域响应跳转，列表行其他区域和上下文菜单不受影响
• 方案一的navigationDestination是SwiftUI 4.0（iOS16+）的新API，代码更简洁易维护

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