[iOS - SwiftUI] background vs overlay 차이

background를 사용한 뷰

SwiftUI의 bacgrkound와 overlay

• background와 overlay 옵션 모두 특정 뷰에 겹치게 뷰를 배치할 때 사용하는 메소드
• 차이점은 background은 뷰 뒤에, overlay는 뷰 앞쪽에 배치 중첩됨

ex) background를 사용하면 뷰 뒷쪽에 배치됨

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
                .background {
                    Color.blue
                }
        }
        .padding()
    }
}

background 사용: Text뒷쪽에 Color.blue가 배치

ex) overay를 사용하면 뷰 앞쪽에 배치되므로 뷰가 가려짐

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
                .overlay(alignment: .center) {
                    Color.blue
                }
        }
        .padding()
    }
}

overlay 사용: 뷰 앞쪽에 배치되므로 가려짐

주의할 점

• background를 사용하면 뷰 뒷쪽에 배치되어 안보여야 하는 것이 아닌가?
  • 사실상 background는 배경 색상을 정하는 것처럼 앞 쪽 Text인 "Hello, world!" 콘텐츠를 제외하고 alpha 값을 0으로 만들어 투명상태로 만들어주는 것

ex) background {} 클로저는 background()메소드와 동일한 역할을 수행함

• 단순히 background()는 배경 색상을 입힐때 사용하고, background {}는 배경 색상 이외의 값도 표출해줄 때 사용

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
                .background(Color.green)
        }
        .padding()
    }
}

ex) background {}는 배경 색상 이외의 값도 표출해줄 때 사용

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
                .background {
                    Circle()
                        .frame(width: 30, height: 30)
                        .opacity(0.1)
                }
        }
        .padding()
    }
}