iOS开发：List中Button与NavigationLink功能分离问题求助

问题核心在于：NavigationLink在List中会默认把整个列表行转为可点击的跳转区域，同时Button的点击事件会向上冒泡，导致点击任意区域都会同时触发两个操作。以下是具体修复方案：

修复思路 #

通过NavigationLink的isActive绑定手动控制跳转逻辑，将NavigationLink隐藏，用普通视图的onTapGesture触发跳转，让Button的点击区域独立响应状态切换。

修改后的完整代码 #

struct ContentView: View {
    @ObservedObject var spendingList: SpendingList
    
    var body: some View {
        NavigationView {
            List {
                ForEach($spendingList.spendings) { $spending in
                    @State private var isNavigating = false
                    
                    ZStack {
                        // 隐藏的NavigationLink，仅通过isActive控制跳转
                        NavigationLink(
                            destination: DetailView(spending: $spending)
                                .navigationTitle(spending.Name),
                            isActive: $isNavigating
                        ) {
                            EmptyView()
                        }
                        .hidden()
                        
                        HStack {
                            Button(action: {
                                spending.Bought.toggle()
                            }) {
                                Image(systemName: spending.Bought ? "checkmark.square" : "square")
                                    .foregroundColor(.accentColor)
                            }
                            .buttonStyle(PlainButtonStyle())
                            
                            // 右侧跳转区域，用手势触发导航
                            HStack {
                                Text(spending.Name)
                                    .frame(maxWidth: .infinity, alignment: .leading)
                                
                                if spending.Price != 0 {
                                    Text("\(spending.Price)")
                                        .frame(maxWidth: .infinity, alignment: .trailing)
                                } else {
                                    Text("empty")
                                        .foregroundColor(.gray)
                                }
                            }
                            .onTapGesture {
                                isNavigating = true
                            }
                        }
                    }
                }
                .navigationTitle("Spending Priority")
            }
        }
    }
}

关键改动说明 #

1. 隐藏NavigationLink：将NavigationLink改为通过isActive绑定控制，用EmptyView()和.hidden()隐藏，避免它占据列表行的点击区域。
2. 独立跳转触发：给右侧文本区域添加onTapGesture，手动设置isNavigating = true触发页面跳转。
3. Button样式调整：添加.buttonStyle(PlainButtonStyle())移除默认高亮效果，让交互更自然。
4. 简化状态切换：用spending.Bought.toggle()替代原判断写法，代码更简洁。

修改后，点击复选框按钮仅切换选中状态，点击右侧文本区域才会跳转到详情页，两个操作完全独立，不会互相触发。

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