如何在工作表视图上制作不透明的背景颜色？

Question

我目前正在使用 SwiftUI 开发应用程序。

我正在寻找某种方法在工作表视图上制作具有不透明度的背景颜色。

有没有办法做到这一点？

---

我已经尝试使用下面的代码来做到这一点，我可以使用 opacity 属性更改颜色，但是我在工作表视图下看不到文本（工作表）...

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

斯威夫特：斯威夫特 5

Answer 1

您无法使用标准工作表官方 API 来完成（因为默认情况下每个托管控制器视图都是不透明的），因此您可以创建自定义工作表视图（具有您需要的任何功能）或使用运行时解决方法来查找该视图并设置其背景清除。如下图（仅用于演示）

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

Answer 2

使用我一整天都在努力寻找的来自@Asperi 的 AWESOME 答案，我构建了一个简单的视图修改器，现在可以将其应用于 .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()
    }

Answer 3

从 iOS 16.4 开始，应该可以将.presentationBackground(_ style: S)与颜色和模糊（材质类型）一起使用。如果您只想为一张纸制作透明背景：

struct ContentView: View {    
    @State private var isPresented = false
    var body: some View {
        Button(action: {
            isPresented.toggle()
        }, label: {
            Label("Sheet", systemImage: "list.bullet.rectangle.portrait")
        })
        .sheet(isPresented: $isPresented) {
            Text("Detail")
                .presentationBackground(.clear)
        }
    }
}

或者您可以使用.presentationBackground()从演示者继承背景样式。

struct ContentView: View {
    @State private var isPresented = false
    var body: some View {
        Button(action: {
            isPresented.toggle()
        }, label: {
            Label("Sheet", systemImage: "list.bullet.rectangle.portrait")
        })
        .sheet(isPresented: $isPresented) {
            Text("Detail")
                .presentationBackground()
        }
        .backgroundStyle(Color("myThemeBackground"))
    }
}