SwiftUI中List列表项同时支持单元格与内部按钮点击

需要实现支持双交互的SwiftUI List组件：

• 点击单元格整体区域：触发单元格选择事件
• 点击单元格内部的按钮：仅触发按钮专属操作，不触发单元格选中高亮

现有实现存在异常：点击单元格内的Hello按钮时，按钮点击事件可以正常响应，但会同时触发整个单元格的选中高亮效果，不符合预期。

现有问题代码：

private enum MenuItem: String, Identifiable, CaseIterable {
    var id: String {
        self.rawValue
    }
    
    case option1
    case option2
    case option3
    case option4
}

private struct MainView: View {
    
    let onSelect: (MenuItem) -> Void
    
    var body: some View {
        VStack(spacing: 0) {
            Text("Demo")
                .padding(16)
            List {
                Section("hello") {
                    ForEach(MenuItem.allCases) { item in
                        ZStack {
                            Button("") {
                                print("yes", item)
                            }
                            VStack(alignment: .leading, spacing: 5) {
                                Text(item.rawValue).font(.title2)
                                Text("something here").font(.body)
                                Button("Hello") {
                                    print("no", item)
                                }.buttonStyle(BorderedButtonStyle())
                                    
                            }
                            .contentShape(Rectangle())
                            .padding(.top, 10)
                            .padding(.bottom, 10)
                            
                        }
                    }
                }
            }.listStyle(.plain)
                
        }.onAppear {
            UITableViewCell.appearance().selectedBackgroundView = {
                let view = UIView()
                view.backgroundColor = .blue
                return view
            }()
        }
    }
}

struct MainView_Previews: PreviewProvider {
    static var previews: some View {
        MainView(onSelect: { _ in })
    }
}

1. 用ZStack叠加铺满整行的空白Button实现整行点击的方式，会和内部按钮产生手势冲突，点击内部按钮时事件会同时透传给外层整行Button
2. 全局配置UITableViewCell.appearance().selectedBackgroundView是UIKit层面的系统行为，只要触摸事件落在cell范围内就会触发默认选中高亮，无法区分点击的是内部按钮还是单元格空白区域

1. 移除ZStack中铺满整行的空白Button，整行点击改用onTapGesture实现
2. 删除全局UITableViewCell选中背景配置，自行通过listRowBackground控制行的高亮状态，仅当主动触发整行点击时才显示高亮
3. 给内部按钮设置高优先级手势，确保点击按钮时事件不会透传到行的点击逻辑

修正后可直接运行的代码：

private enum MenuItem: String, Identifiable, CaseIterable {
    var id: String {
        self.rawValue
    }
    
    case option1
    case option2
    case option3
    case option4
}

private struct MainView: View {
    
    let onSelect: (MenuItem) -> Void
    @State private var selectedItem: MenuItem?
    
    var body: some View {
        VStack(spacing: 0) {
            Text("Demo")
                .padding(16)
            List {
                Section("hello") {
                    ForEach(MenuItem.allCases) { item in
                        VStack(alignment: .leading, spacing: 5) {
                            Text(item.rawValue).font(.title2)
                            Text("something here").font(.body)
                            Button("Hello") {
                                print("no", item)
                            }
                            .buttonStyle(BorderedButtonStyle())
                            .highPriorityGesture(
                                TapGesture().onEnded {
                                    print("no", item)
                                }
                            )
                        }
                        .contentShape(Rectangle())
                        .padding(.vertical, 10)
                        .listRowBackground(
                            Rectangle()
                                .fill(selectedItem == item ? Color.blue : Color.clear)
                        )
                        .onTapGesture {
                            selectedItem = item
                            print("yes", item)
                            onSelect(item)
                        }
                    }
                }
            }.listStyle(.plain)
        }
    }
}

struct MainView_Previews: PreviewProvider {
    static var previews: some View {
        MainView(onSelect: { _ in })
    }
}

修正后的交互效果完全符合预期：

• 点击单元格非按钮区域：正常触发整行选择逻辑，单元格显示蓝色高亮
• 点击内部Hello按钮：仅触发按钮自身的点击事件与按钮默认高亮，整行不会触发选中高亮，也不会执行整行选择逻辑

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