ios - 是否可以在 SwiftUI 中将 "Presentation Hosting Controller"背景颜色设置为透明而不是白色？

Question

我正在尝试制作一个“FullScreenModalView”，您可以在其中发送具有固定高度和宽度的任何 View ，并且它将以模态演示文稿显示。它工作完美，但我无法使“演示文稿托管 Controller ”背景颜色透明。我尝试了几种解决方案，例如将自定义透明 View 设置为背景 View ，但它仍然对“演示托管 Controller ”背景颜色没有影响。

我想要实现的目标:

但是在 View 层次结构中，我可以看到演示托管 Controller 的背景颜色是白色，我需要将其设置为清晰的颜色。

我的代码:
内容 View

import SwiftUI

struct ContentView: View {
    @State private var isShowingCommonMenu = false
    @State private var isPresented = false
    
    var body: some View {
        VStack {
            Button {
                //MARK: Show Network Configure List
                self.isShowingCommonMenu.toggle()
            } label: {
                Text("GO")
            }
            .fullScreenCover(isPresented: $isShowingCommonMenu) {
                NavigationStack {
                    GeometryReader { geometry in
                        FullScreenModalView(isShowingCommonMenu: $isShowingCommonMenu, childViewWidth: (geometry.size.width - geometry.size.width/10), childViewHeight: geometry.size.height) {
                            TheViewToBeLoadedView()
                        }
                    }
                }
            }
        }
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        .background(Color.orange)
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

全屏模态视图

import SwiftUI

struct FullScreenModalView<Content: View>: View {
    @Binding var isShowingCommonMenu: Bool
    var childViewWidth: CGFloat
    var childViewHeight: CGFloat
    let content: () -> Content
    
    var body: some View {
        ZStack {
            Color.black.opacity(0.4)
                .edgesIgnoringSafeArea(.all)
                .onTapGesture {
                    //Dismiss the modal view when the user taps outside of it
                    dismiss()
                }
            
            VStack {
                content()
                    .background(ClearBackgroundView())
            }
            .frame(width: childViewWidth, height: childViewHeight)
            .background(Color.white)
            .cornerRadius(10)
            .overlay(
                Button {
                    dismiss()
                } label: {
                    DismissButton()
                }, alignment: .topTrailing)
        }
        .ignoresSafeArea(.keyboard)
        .background(TransparentBackground())
    }
    
    private func dismiss() {
        isShowingCommonMenu = false
    }
}

struct FullScreenModalView_Previews: PreviewProvider {
    static var previews: some View {
        FullScreenModalView(isShowingCommonMenu: .constant(true), childViewWidth: 200, childViewHeight: 200) {
            Text("This is a custom preview view")
        }
    }
}
struct TransparentBackground: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        DispatchQueue.main.async {
            view.superview?.superview?.backgroundColor = .clear
        }
        return view
    }

    func updateUIView(_ uiView: UIView, context: Context) {}
}

struct DismissButton: View {
    var body: some View {
        ZStack {
            Circle()
                .frame(width: 30, height: 30)
                .foregroundColor(.white)
                .opacity(0.6)
            Image(systemName: "xmark")
                .imageScale(.medium)
                .frame(width: 44, height: 44)
                .foregroundColor(Color(.label))
        }
    }
}

以及我想要加载的示例 View :

import SwiftUI

struct TheViewToBeLoadedView: View {
    var body: some View {
        GeometryReader { geometry in
            Text("TheViewToBeLoadedView")
                .frame(width: geometry.size.width, height: geometry.size.height, alignment: .center)
                .background(Color.yellow)
        }
    }
}

struct TheViewToBeLoadedView_Previews: PreviewProvider {
    static var previews: some View {
        TheViewToBeLoadedView()
    }
}

Answer 1

对 .fullScreenCover 中的内容应用 .background(TransparentBackground())

例如

struct ContentView: View {
    @State private var showingFullscreenModal: Bool = false

    var body: some View {
        VStack {
            Button {
                showingFullscreenModal.toggle()
            } label: {
                Text("Show Fullscreen Modal")
            }
        }
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        .background(.orange)

        .fullScreenCover(isPresented: $showingFullscreenModal) {
            SubView(showing: $showingFullscreenModal, width: 300, height: 400)
                .background(TransparentBackground()) // <--- Here
        }
    }
}

struct TransparentBackground: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        DispatchQueue.main.async {
            view.superview?.superview?.backgroundColor = .clear
        }
        return view
    }

    func updateUIView(_ uiView: UIView, context: Context) {}
}


struct SubView: View {
    @Binding var showing: Bool
    
    let width: CGFloat
    let height: CGFloat
    
    var body: some View {
        VStack {
            Text("Hello World")
            
            Button {
                showing = false
            } label: {
                Text("Close")
            }
        }
        .frame(width: width, height: height)
        .background(.teal)
    }
}

因此，在您的情况下，在 .fullScreenCover 中的 NavigationStack 上应用 .background(TransparentBackground())