기본 Sheet Background

Swiftui를 개발하다보면 .Background(.clear) 을 사용해 배경을 지우고 싶을때,

간혹 지워지지 않는 View들이 있다. 예를 들면 .Sheet로 띄었을때

아래처럼 시트>백그라운드>컨텐츠가 그려지기에 백그라운드를 클리어 한다고 해도 배경을 완전 지울 수 없다

simulator_screenshot_07E2E6D1-B113-4932-B8B3-7445D88EA06F.png

import SwiftUI

struct ExampleBackgroundColor: View {
    @State private var showSheet: Bool = false
    
    var body: some View {
        VStack {
            Button(action: {
                showSheet = true
                
            }) {
                Text("Sheet Open")
            }
        }
        .sheet(isPresented: $showSheet) {
            VStack {
                Text("배경을 지워보자")
            }
            .background(.clear)
        }
    }
}

Sheet의 배경을 지워보자

import SwiftUI

struct TransparentBackground: UIViewRepresentable {
    
    private let color: Color
    
    init(_ color: Color = .clear) {
        self.color = color
    }
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        DispatchQueue.main.async {
            view.superview?.superview?.backgroundColor = color.uiColor
        }
        return view
    }

    func updateUIView(_ uiView: UIView, context: Context) {
        uiView.superview?.superview?.backgroundColor = color.uiColor
    }
}

simulator_screenshot_9E281CD9-798E-4F4C-8781-5A6CEF1287FB.png

import SwiftUI

struct ExampleBackgroundColor: View {
    @State private var showSheet: Bool = false
    
    var body: some View {
        VStack {
            Button(action: {
                showSheet = true
                
            }) {
                Text("Sheet Open")
            }
        }
        .sheet(isPresented: $showSheet) {
            VStack {
                Text("배경을 지워보자")
            }
            .background(TransparentBackground())
        }
    }
}

iOS 16.4 대응