如何在 Sheet 视图上制作不透明的背景色?

How can I make a background color with opacity on a Sheet view?

我目前正在使用 SwiftUI.

开发应用程序

我正在寻找在 Sheet 视图上制作不透明背景颜色的方法。

有什么办法吗?


我已经尝试使用下面的代码来做到这一点,我可以使用不透明度 属性 更改颜色,但我看不到 [=29] 下的文本 (Sheet) =] 查看...

import SwiftUI

struct ContentView: View {
    
    @State var isSheet = false
    
    var body: some View {
       
        Button(action: {self.isSheet.toggle()}) {
            Text("Sheet")
        }.sheet(isPresented: $isSheet){
            Color.yellow.opacity(0.5)
        }
    }
}

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

Xcode:版本 11.7

Swift: Swift 5

你不能用标准 sheet 官方 API 来做到这一点(因为默认情况下每个托管控制器视图都是不透明的),所以你可以创建自定义 sheet 视图(具有任何功能您需要)或使用 run-time 变通方法找到该视图并将其背景设置为清除。如下所示(仅用于演示

struct DemoView: View {

    @State var isSheet = false

    var body: some View {

        Button(action: {self.isSheet.toggle()}) {
            Text("Sheet")
        }.sheet(isPresented: $isSheet){
            Color.yellow.opacity(0.5)
                .background(BackgroundClearView())
        }
    }
}

struct BackgroundClearView: 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) {}
}

backup

使用我一整天都在努力寻找的来自@Asperi 的令人敬畏的答案,我构建了一个简单的视图修改器,现在可以在 .sheet 或 .fullScreenCover 模态视图中应用并提供透明背景。然后,您可以根据需要为内容设置框架修饰符以适合屏幕,而用户不必知道模态不是自定义大小。

import SwiftUI

struct ClearBackgroundView: UIViewRepresentable {
    func makeUIView(context: Context) -> some UIView {
        let view = UIView()
        DispatchQueue.main.async {
            view.superview?.superview?.backgroundColor = .clear
        }
        return view
    }
    func updateUIView(_ uiView: UIViewType, context: Context) {
    }
}

struct ClearBackgroundViewModifier: ViewModifier {
    
    func body(content: Content) -> some View {
        content
            .background(ClearBackgroundView())
    }
}

extension View {
    func clearModalBackground()->some View {
        self.modifier(ClearBackgroundViewModifier())
    }
}

用法:

.sheet(isPresented: $isPresented) {
            ContentToDisplay()
            .frame(width: 300, height: 400)
            .clearModalBackground()
    }