如何阻止嵌套在Button/NavigationLink中的Menu触发父控件响应？

问题原因 #

Menu作为可交互控件，嵌套在Button中时，点击事件会向上冒泡触发父Button的动作——这是因为Menu的事件处理逻辑不会像嵌套Button那样自动拦截上层事件。

解决方案 #

方案1：高优先级手势拦截事件 #

给Menu添加高优先级的空Tap手势，优先拦截点击事件，阻止其传递到父Button：

struct Testing: View {
    var body: some View {
        Button {
            print("DEBUG: Button Action")
        } label: {
            HStack {
                Text("Some Content")
                
                Menu {
                    Button(action: {}) {
                        Label("Save", systemImage: "bookmark")
                    }
                    
                    Button(action: {}) {
                        Label("Block user", systemImage: "x.circle")
                    }
                    
                    Button(action: {}) {
                        Label("Report", systemImage: "flag")
                    }
                }
                label: {
                    Image(systemName: "ellipsis")
                        .frame(width: 30, height: 30)
                }
                .highPriorityGesture(TapGesture()) // 拦截事件，阻止传递到父Button
            }
        }
    }
}

方案2：拆分交互区域 #

将父Button的交互范围限制在Text区域，Menu独立出来，从根源避免嵌套导致的事件冲突：

struct Testing: View {
    var body: some View {
        HStack {
            // 仅Text区域触发父Button动作
            Button {
                print("DEBUG: Button Action")
            } label: {
                Text("Some Content")
            }
            
            // Menu独立存在，点击仅触发自身弹窗
            Menu {
                Button(action: {}) {
                    Label("Save", systemImage: "bookmark")
                }
                
                Button(action: {}) {
                    Label("Block user", systemImage: "x.circle")
                }
                
                Button(action: {}) {
                    Label("Report", systemImage: "flag")
                }
            }
            label: {
                Image(systemName: "ellipsis")
                    .frame(width: 30, height: 30)
            }
        }
    }
}

方案3：限制父Button的点击区域 #

通过contentShape指定父Button仅响应Text区域的点击，Menu区域不受父Button的点击事件影响：

struct Testing: View {
    var body: some View {
        Button {
            print("DEBUG: Button Action")
        } label: {
            HStack {
                Text("Some Content")
                    .contentShape(Rectangle()) // 父Button仅响应此区域点击
                Menu {
                    Button(action: {}) {
                        Label("Save", systemImage: "bookmark")
                    }
                    
                    Button(action: {}) {
                        Label("Block user", systemImage: "x.circle")
                    }
                    
                    Button(action: {}) {
                        Label("Report", systemImage: "flag")
                    }
                }
                label: {
                    Image(systemName: "ellipsis")
                        .frame(width: 30, height: 30)
                }
            }
        }
    }
}

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