SwiftUI同列表项内多按钮ContextMenu失效问题求助

在SwiftUI的List组件中，同一行内的子视图ContextMenu无法触发，核心原因是List行默认会拦截长按手势，优先响应行级别的交互，导致子视图的ContextMenu被覆盖。

以下是修复后的代码：

struct TestView: View {
    var body: some View {
        List{
            Section("标签"){
                HStack(alignment: .top,spacing: 5) {
                    Text("hello")
                        .contextMenu {
                            Button(role: .destructive) {
                                // 这里添加删除1的执行逻辑
                            } label: {
                                Label("删除1", systemImage: "trash")
                            }
                        }
                        .highPriorityGesture(LongPressGesture())
                        .padding(5)
                        .background(.blue)
                        .foregroundColor(.white)
                        .cornerRadius(5.0)
                    
                    Text("world")
                        .contextMenu {
                            Button(role: .destructive) {
                                // 这里添加删除2的执行逻辑
                            } label: {
                                Label("删除2", systemImage: "trash")
                            }
                        }
                        .highPriorityGesture(LongPressGesture())
                        .padding(5)
                        .background(.blue)
                        .foregroundColor(.white)
                        .cornerRadius(5.0)
                }
                .listRowContextMenu(nil)
            }
        }
    }
}

关键修改说明： #

• .listRowContextMenu(nil)：禁用List行的默认上下文菜单，消除行级交互对子视图的拦截。
• .highPriorityGesture(LongPressGesture())：提升子视图的长按手势优先级，确保长按事件被当前子视图捕获并触发对应的ContextMenu。

替代方案：使用Button包裹子视图 #

如果希望更简洁的实现，也可以将Text替换为Button（即使按钮本身不需要点击动作），利用Button的高优先级交互特性，无需额外添加手势：

struct TestView: View {
    var body: some View {
        List{
            Section("标签"){
                HStack(alignment: .top,spacing: 5) {
                    Button(action: {}) {
                        Text("hello")
                            .padding(5)
                            .background(.blue)
                            .foregroundColor(.white)
                            .cornerRadius(5.0)
                    }
                    .contextMenu {
                        Button(role: .destructive) {
                            // 删除1逻辑
                        } label: {
                            Label("删除1", systemImage: "trash")
                        }
                    }
                    
                    Button(action: {}) {
                        Text("world")
                            .padding(5)
                            .background(.blue)
                            .foregroundColor(.white)
                            .cornerRadius(5.0)
                    }
                    .contextMenu {
                        Button(role: .destructive) {
                            // 删除2逻辑
                        } label: {
                            Label("删除2", systemImage: "trash")
                        }
                    }
                }
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者紫微天和