SwiftUI中List嵌套VStack时Context Menu功能异常问题问询

问题现象 #

• 使用List容器时，若内部嵌套VStack，长按VStack内的按钮会触发整个VStack的上下文菜单，而非仅触发对应按钮的菜单；
• 替换为ScrollView则无此异常。

测试代码：

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            VStack { // 此VStack导致Context Menu异常
                Button("1", action: {})
                    .contextMenu {
                        Button {
                            print("hi")
                        } label: {
                            Text("test")
                        }
                    }
                Button("2", action: {})
                    .contextMenu {
                        Button {
                            print("hi")
                        } label: {
                            Text("test")
                        }
                    }
            }
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

是否为Apple Bug？ #

这属于SwiftUI中List与contextMenu交互的已知行为问题，本质是List会将VStack自动识别为单元格内容，单元格的长按手势优先级高于内部视图绑定的contextMenu。严格来说不算“Bug”，但属于不符合直观预期的设计行为。

保留VStack的解决方案 #

以下几种方式可以在保留VStack布局的前提下修复问题：

方案1：给按钮添加高优先级手势，同时消除单元格额外区域 #

通过highPriorityGesture让按钮优先捕获长按手势，再用listRowInsets去除List单元格的默认内边距，避免空白区域触发菜单：

VStack {
    Button("1", action: {})
        .contextMenu {
            Button {
                print("hi")
            } label: {
                Text("test")
            }
        }
        .highPriorityGesture(LongPressGesture())
    Button("2", action: {})
        .contextMenu {
            Button {
                print("hi")
            } label: {
                Text("test")
            }
        }
        .highPriorityGesture(LongPressGesture())
}
.listRowInsets(EdgeInsets())

方案2：用UIKit容器隔离List手势捕获 #

通过UIViewRepresentable将VStack包裹在原生UIStackView中，隔离List的手势传递逻辑，适合复杂布局场景：

struct UIStackWrapper<Content: View>: UIViewRepresentable {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    func makeUIView(context: Context) -> UIStackView {
        let stack = UIStackView()
        stack.axis = .vertical
        stack.spacing = 8
        let hostingView = UIHostingController(rootView: content).view
        hostingView?.translatesAutoresizingMaskIntoConstraints = false
        stack.addArrangedSubview(hostingView!)
        return stack
    }
    
    func updateUIView(_ uiView: UIStackView, context: Context) {}
}

// 使用示例
List {
    UIStackWrapper {
        Button("1", action: {})
            .contextMenu {
                Button {
                    print("hi")
                } label: {
                    Text("test")
                }
            }
        Button("2", action: {})
            .contextMenu {
                Button {
                    print("hi")
                } label: {
                    Text("test")
                }
            }
    }
    Image(systemName: "globe")
        .imageScale(.large)
        .foregroundColor(.accentColor)
    Text("Hello, world!")
}

方案3：拆分VStack为独立List行（按需选择） #

如果布局允许，可将VStack内的按钮拆分为List的独立行元素，彻底避免单元格手势冲突：

List {
    Button("1", action: {})
        .contextMenu {
            Button {
                print("hi")
            } label: {
                Text("test")
            }
        }
    Button("2", action: {})
        .contextMenu {
            Button {
                print("hi")
            } label: {
                Text("test")
            }
        }
    Image(systemName: "globe")
        .imageScale(.large)
        .foregroundColor(.accentColor)
    Text("Hello, world!")
}

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