SwiftUI如何将DetailView的overlay传递到父视图展示避免单元格限制

方案1：抽离公共容器+统一状态管理，无重复代码 #

该方案符合SwiftUI数据流向，浮层完全在父视图层级渲染，两个父视图不需要重复写overlay逻辑。

第一步：给ViewModel增加选中状态存储 #

新增@Published属性存储当前需要展示浮层的姓名，为nil时不展示浮层：

class MyViewModel: ObservableObject {
    @Published var selectedNameForOverlay: String?
    
    func addName(name: String) {
        ///
    }
    func doSomething1(name: String) {
        ///
    }
    func doSomething2(name: String) {
        ///
    }
}

第二步：抽离公共列表容器 #

把两个父视图重复的列表布局、overlay逻辑统一封装到公共容器中：

struct NameListContainerView: View {
    @EnvironmentObject var viewModel: MyViewModel
    let names: [String]
    
    var body: some View {
        VStack {
            ForEach(names, id: \.self) { name in
                DetailView(name: name)
            }
        }
        // 父层级overlay统一在这里实现，不需要在两个MainView重复写
        .overlay(
            Group {
                if let selectedName = viewModel.selectedNameForOverlay {
                    DetailView.DetailOverlayView(name: selectedName)
                        .background(Color.white.opacity(0.95).shadow(radius: 12))
                        // 点击浮层外关闭
                        .onTapGesture {
                            viewModel.selectedNameForOverlay = nil
                        }
                }
            }
        )
    }
}

第三步：改造DetailView #

点击单元格时给ViewModel的选中状态赋值即可唤起父层浮层，不需要在DetailView里加overlay：

struct DetailView: View {
    @EnvironmentObject var viewModel: MyViewModel
    // name不需要@State，只读传值即可
    let name: String
    
    var body: some View {
        VStack {
            Text("Name of the user: ")
            Text(name)
        }
        .onTapGesture {
            viewModel.selectedNameForOverlay = name
        }
    }
    
    struct DetailOverlayView: View {
        // 不需要Binding，只读传入选中的姓名即可
        let name: String
        @EnvironmentObject var viewModel: MyViewModel
        
        var body: some View {
            VStack(spacing: 16) {
                Button(action: {
                    viewModel.addName(name: name)
                    viewModel.selectedNameForOverlay = nil
                }, label: {
                    Text("Add name")
                })
                Button(action: {
                    viewModel.doSomething1(name: name)
                    viewModel.selectedNameForOverlay = nil
                }, label: {
                    Text("doSomething1")
                })
                Button(action: {
                    viewModel.doSomething2(name: name)
                    viewModel.selectedNameForOverlay = nil
                }, label: {
                    Text("doSomething2")
                })
            }
            .padding()
        }
    }
}

第四步：简化父视图实现 #

两个父视图直接调用公共容器即可，不需要额外写overlay逻辑：

struct MainView: View {
    @StateObject var viewModel = MyViewModel()
    var names = ["aaa", "ccc", "ddd", "gght"]
    
    var body: some View {
        NameListContainerView(names: names)
            .environmentObject(viewModel)
    }
}

struct AnotherMainView: View {
    @StateObject var viewModel = MyViewModel()
    var names = ["bbb", "hhh"]
    
    var body: some View {
        NameListContainerView(names: names)
            .environmentObject(viewModel)
    }
}

方案2：DetailView直接唤起全局浮层，无需父层修改 #

如果不想改动父视图代码，可以直接把浮层渲染到全局窗口层级，完全突破DetailView的frame限制，不需要硬编码宽高：

第一步：新增全局浮层扩展 #

extension View {
    func globalOverlay<Content: View>(isPresented: Binding<Bool>, @ViewBuilder content: @escaping () -> Content) -> some View {
        self.onChange(of: isPresented.wrappedValue) { show in
            guard let window = UIApplication.shared.connectedScenes
                .filter({$0.activationState == .foregroundActive})
                .compactMap({$0 as? UIWindowScene})
                .first?.windows
                .first(where: \.isKeyWindow) else { return }
            if show {
                let host = UIHostingController(rootView: content())
                host.view.backgroundColor = .clear
                host.view.tag = 9999
                host.view.frame = window.bounds
                window.addSubview(host.view)
            } else {
                window.viewWithTag(9999)?.removeFromSuperview()
            }
        }
    }
}

第二步：改造DetailView #

直接在单元格内部控制浮层展示即可：

struct DetailView: View {
    @EnvironmentObject var viewModel: MyViewModel
    let name: String
    @State private var showOverlay = false
    
    var body: some View {
        VStack {
            Text("Name of the user: ")
            Text(name)
        }
        .onTapGesture {
            showOverlay = true
        }
        .globalOverlay(isPresented: $showOverlay) {
            // 浮层内容
            Color.black.opacity(0.2)
                .ignoresSafeArea()
                .onTapGesture { showOverlay = false }
                .overlay(
                    DetailOverlayView(name: name, showOverlay: $showOverlay)
                        .environmentObject(viewModel)
                )
        }
    }
    
    struct DetailOverlayView: View {
        let name: String
        @Binding var showOverlay: Bool
        @EnvironmentObject var viewModel: MyViewModel
        
        var body: some View {
            VStack(spacing: 16) {
                Button(action: {
                    viewModel.addName(name: name)
                    showOverlay = false
                }, label: {
                    Text("Add name")
                })
                Button(action: {
                    viewModel.doSomething1(name: name)
                    showOverlay = false
                }, label: {
                    Text("doSomething1")
                })
                Button(action: {
                    viewModel.doSomething2(name: name)
                    showOverlay = false
                }, label: {
                    Text("doSomething2")
                })
            }
            .padding()
            .background(Color.white.cornerRadius(8))
        }
    }
}

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