SwiftUI如何向自定义ConfirmationDialog传入独立按钮及对应动作

我正在开发带图标的自定义ConfirmationDialog组件，目前基础功能运行正常，但存在两处不足：

• 在View Modifier中仅能将所有按钮作为单个内容容器访问，无法自动在按钮之间添加分割线
• 无法在按钮触发动作时自动关闭遮罩层，必须在调用侧的闭包中手动实现关闭逻辑

核心诉求是找到将独立按钮及其对应触发动作传入Modifier的方案，我之前尝试过多个TupleView初始化方法，但不清楚如何将其应用到Modifier和View扩展中，也不知道怎么绑定按钮的触发动作。

原有实现代码 #

struct ContentView: View {
    
    @State private var showConfirmationDialog = false
    @State private var showModifierDialog = false
    
    var body: some View {
        VStack {
            Button("Show Dialog") { showConfirmationDialog = true }
            Button("Show ViewMod Dialog") {
                withAnimation {
                    showModifierDialog = true
                }
            }
            .padding()
        }
        .padding()
        
        // 系统原生confirmationDialog
        .confirmationDialog("Test", isPresented: $showConfirmationDialog) {
            Button { } label: {
                Label("Add completion", systemImage: "checkmark.circle")
            }
            Button { } label: {
                Label("Add Note", systemImage: "note.text.badge.plus")
            }
            Button("Cancel", role: .cancel) {}
        }
        
        // 自定义带图标的confirmationDialog，目前需要手动加分割线、手动写关闭逻辑
        .customConfirmDialog(isPresented: $showModifierDialog) {
            Button {
                // 业务逻辑
                showModifierDialog = false // 必须手动关闭
            } label: {
                Label("Add completion", systemImage: "checkmark.circle")
            }
            Divider() // 必须手动加分割线
            Button {
                // 业务逻辑
                showModifierDialog = false // 必须手动关闭
            } label: {
                Label("Add Note", systemImage: "note.text.badge.plus")
            }
        }
    }
}


// 自定义ConfirmDialog Modifier和View扩展
extension View {
    func customConfirmDialog<A: View>(isPresented: Binding<Bool>, @ViewBuilder actions: @escaping () -> A) -> some View {
        return self.modifier(MyCustomModifier(isPresented: isPresented, actions: actions))
    }
}

struct MyCustomModifier<A>: ViewModifier where A: View {
    
    @Binding var isPresented: Bool
    @ViewBuilder let actions: () -> A
    
    func body(content: Content) -> some View {
        ZStack {
            content
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            ZStack(alignment: .bottom) {
                if isPresented {
                    Color.primary.opacity(0.2)
                        .ignoresSafeArea()
                        .onTapGesture {
                                isPresented = false
                        }
                        .transition(.opacity)
                }
                
                if isPresented {
                    VStack {
                        GroupBox {
                            actions()
                                .frame(maxWidth: .infinity, alignment: .leading)
                        }
                        
                        GroupBox {
                            Button("Cancel", role: .cancel) {
                                    isPresented = false
                            }
                            .bold()
                            .frame(maxWidth: .infinity, alignment: .center)
                        }
                    }
                    .font(.title3)
                    .padding(8)
                    .transition(.move(edge: .bottom))
                }
            }
        }
        .animation(.easeInOut, value: isPresented)
   }
}

不需要手动处理复杂的TupleView多参数重载，直接使用SwiftUI内置的可变视图能力即可实现需求，核心逻辑是两点：

1. 遍历传入的所有按钮子视图，在相邻按钮之间自动插入分割线
2. 拦截按钮的点击事件，先执行弹窗关闭逻辑，再执行业务方传入的按钮动作

改造后完整代码 #

首先新增两个辅助结构，用于遍历子视图、包装按钮点击逻辑：

import SwiftUI

// 用于遍历ViewBuilder传入的多子视图
struct ActionLayout: _VariadicView.MultiViewRoot {
    let closeAction: () -> Void
    
    func body(children: _VariadicView.Children) -> some View {
        let lastChildId = children.last?.id
        VStack(spacing: 0) {
            ForEach(children) { child in
                child
                    .buttonStyle(WrappedActionButtonStyle(closeAction: closeAction))
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.vertical, 12)
                    .padding(.horizontal, 16)
                
                // 非最后一个按钮，自动插入分割线
                if child.id != lastChildId {
                    Divider()
                }
            }
        }
    }
}

// 自定义按钮样式：注入自动关闭弹窗逻辑
struct WrappedActionButtonStyle: ButtonStyle {
    let closeAction: () -> Void
    
    func makeBody(configuration: Configuration) -> some View {
        Button {
            closeAction()
            configuration.trigger()
        } label: {
            configuration.label
        }
    }
}

修改原有Modifier和View扩展，接入上述逻辑：

extension View {
    func customConfirmDialog<Actions: View>(
        isPresented: Binding<Bool>,
        @ViewBuilder actions: @escaping () -> Actions
    ) -> some View {
        self.modifier(
            MyCustomModifier(
                isPresented: isPresented,
                actions: {
                    _VariadicView.Tree(ActionLayout(closeAction: { isPresented.wrappedValue = false })) {
                        actions()
                    }
                }
            )
        )
    }
}

struct MyCustomModifier<Actions: View>: ViewModifier {
    @Binding var isPresented: Bool
    @ViewBuilder let actions: () -> Actions
    
    func body(content: Content) -> some View {
        ZStack {
            content
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            ZStack(alignment: .bottom) {
                if isPresented {
                    Color.primary.opacity(0.2)
                        .ignoresSafeArea()
                        .onTapGesture {
                            isPresented = false
                        }
                        .transition(.opacity)
                }
                
                if isPresented {
                    VStack(spacing: 8) {
                        GroupBox {
                            actions()
                        }
                        .clipped() // 裁剪超出GroupBox的内容，保证分割线样式正常
                        
                        GroupBox {
                            Button("Cancel", role: .cancel) {
                                isPresented = false
                            }
                            .bold()
                            .frame(maxWidth: .infinity, alignment: .center)
                            .padding(.vertical, 12)
                        }
                    }
                    .font(.title3)
                    .padding(8)
                    .transition(.move(edge: .bottom))
                }
            }
        }
        .animation(.easeInOut, value: isPresented)
   }
}

调用方式 #

改造后调用逻辑和系统原生confirmationDialog完全一致，不需要手动加分割线，也不需要在按钮action里手动写关闭逻辑：

.customConfirmDialog(isPresented: $showModifierDialog) {
    Button {
        // 仅需编写业务逻辑，无需手动关闭弹窗
        print("点击添加完成")
    } label: {
        Label("Add completion", systemImage: "checkmark.circle")
    }
    // 无需手动添加Divider，组件自动插入
    Button {
        print("点击添加备注")
    } label: {
        Label("Add Note", systemImage: "note.text.badge.plus")
    }
}

实现效果 #

• 自动在操作按钮之间插入分割线，调用方无感知
• 点击任意操作按钮自动关闭弹窗，无需业务方重复编写关闭代码
• 完全兼容系统Button的所有原生特性，支持按钮role、自定义Label、禁用状态等原生能力

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