如何在SwiftUI中自定义.sheet视图修饰符

核心思路 #

你遇到的绑定丢失问题核心误区是：直接存AnyView时没有把绑定的读写逻辑一起封装带走。我们可以通过类型抹除+闭包捕获绑定的方式，把Sheet的状态、内容、回调都打包成配置项，通过PreferenceKey传递到顶层父视图处理弹出。

完整实现代码 #

第一步：定义基础配置与PreferenceKey #

// 类型抹除后的Sheet配置结构体，封装所有Sheet相关逻辑
private struct SheetConfiguration {
    let isPresented: Bool
    let onDismiss: (() -> Void)?
    let content: () -> AnyView
    let dismiss: () -> Void // 封装绑定的写逻辑，用于顶层关闭Sheet时同步状态
}

// 用于跨视图传递Sheet配置的PreferenceKey
private struct SheetPreferenceKey: PreferenceKey {
    static var defaultValue: [SheetConfiguration] = []
    static func reduce(value: inout [SheetConfiguration], nextValue: () -> [SheetConfiguration]) {
        // 后续注册的Sheet优先级更高，可根据需求调整排序逻辑
        value.append(contentsOf: nextValue())
    }
}

第二步：实现你需要的showSheet修饰符 #

extension View {
    func showSheet<Content: View>(
        isPresented: Binding<Bool>,
        onDismiss: (() -> Void)? = nil,
        @ViewBuilder content: @escaping () -> Content
    ) -> some View {
        // 把绑定的读写逻辑都捕获到闭包中，完成类型抹除
        let config = SheetConfiguration(
            isPresented: isPresented.wrappedValue,
            onDismiss: onDismiss,
            content: { AnyView(content()) },
            dismiss: { isPresented.wrappedValue = false }
        )
        // 将配置写入PreferenceKey，不影响当前视图的原有结构
        return self.preference(key: SheetPreferenceKey.self, value: [config])
    }
}

第三步：实现顶层Sheet宿主修饰符 #

只需要在最外层父视图加一次这个修饰符，就可以处理所有子视图的Sheet弹出请求：

private struct SheetHostModifier: ViewModifier {
    @State private var activeSheet: SheetConfiguration?
    
    func body(content: Content) -> some View {
        content
            // 监听所有子视图上报的Sheet配置
            .onPreferenceChange(SheetPreferenceKey.self) { allConfigs in
                // 取第一个激活的Sheet，可根据需求调整为取最后一个、或者支持多Sheet栈
                activeSheet = allConfigs.first(where: \.isPresented)
            }
            // 顶层统一弹出Sheet
            .sheet(
                isPresented: .init(
                    get: { activeSheet != nil },
                    set: { newValue in
                        if !newValue {
                            activeSheet?.dismiss()
                        }
                    }
                ),
                onDismiss: activeSheet?.onDismiss
            ) {
                activeSheet?.content() ?? AnyView(EmptyView())
            }
    }
}

extension View {
    /// 放在视图树最顶层，作为所有子视图Sheet的弹出宿主
    func sheetHost() -> some View {
        self.modifier(SheetHostModifier())
    }
}

使用示例 #

1. 顶层父视图挂载宿主 #

struct RootAppView: View {
    var body: some View {
        NavigationStack {
            HomeView()
        }
        // 全局只需要加一次
        .sheetHost()
    }
}

2. 任意子视图直接定义Sheet #

不需要向父视图传递任何参数，完全隔离实现：

struct ChildListItemView: View {
    @State private var showEditSheet = false
    @State private var inputText = ""
    
    var body: some View {
        Button("编辑当前项") {
            showEditSheet = true
        }
        .showSheet(isPresented: $showEditSheet, onDismiss: {
            print("编辑Sheet已关闭")
        }) {
            // 绑定可以正常传递到Sheet内容中，无丢失问题
            NavigationStack {
                Form {
                    TextField("输入内容", text: $inputText)
                }
                .toolbar {
                    ToolbarItem(placement: .cancellationAction) {
                        Button("取消") {
                            showEditSheet = false
                        }
                    }
                }
            }
        }
    }
}

可选优化方向 #

• 支持sheet(item:)用法：给SheetConfiguration加可选id字段，匹配item的id即可实现
• 支持多Sheet栈：把activeSheet改成数组，按照入栈顺序弹出
• 自定义转场：把系统的.sheet替换为自己实现的overlay遮罩，完全自定义弹出动画

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