是否可以在 SwiftUI 中使“Presentation Hosting Controller”背景色透明而不是白色?

问题描述 投票:0回答:1

我正在尝试制作一个“FullScreenModalView”,您可以在其中发送任何具有固定高度和宽度的视图,并且它将以模态显示形式显示。它运行良好,但我无法使“Presentation Hosting Controller”背景颜色透明。我尝试了几个解决方案,比如将自定义透明视图设置为背景视图,但它仍然对“Presentation Hosting Controller”背景颜色没有影响。

我想达到的目标:

但是在视图层次结构中我可以看到Presentation Hosting Controller的背景颜色是白色,我需要将其设置为清晰的颜色。

我的代码:
内容视图

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))
        }
    }
}

我要加载的示例视图:

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()
    }
}
ios swift swiftui modalviewcontroller
1个回答
2
投票

在 .fullScreenCover 内的 NavigationStack 上应用 .background(TransparentBackground())

© www.soinside.com 2019 - 2024. All rights reserved.