[SwiftUI] - Navigation bar 제외한 background Color 설정

 

 

실패했던 과정

 

 

다음과 같이 NavigationView안에 ScrollView가 있는 View에서 Navigation bar 제외한 background Color를 지정하고자 했다.

ScrollView 바로 아래에 .background(Color.gray.opacity(0.3)를 작성하니 전체 view의 color가 바뀌었다.....

 

struct ContentView: View {

    var body: some View {
        NavigationView {
            ScrollView {
               
            }
            .background(Color.gray.opacity(0.3)
            .navigationBarTitle(Text("PostMain"), displayMode: .inline)
            .navigationBarItems(trailing:                       
                Image(systemName: "plus")
                    .imageScale(.large)
            )
        }
    }
}

 

 

 

성공한 결과~~!!!

 

 

edgesIgnoringSafeArea를 사용하여 Navigation bar 부분을 제외하고 background color를 지정하였다.

 

struct ContentView: View {

    var body: some View {
        NavigationView {
            ScrollView {
               
            }
            .background(Color.gray.opacity(0.3).edgesIgnoringSafeArea(.bottom))
            .navigationBarTitle(Text("PostMain"), displayMode: .inline)
            .navigationBarItems(trailing:                       
                Image(systemName: "plus")
                    .imageScale(.large)
            )
        }
    }
}

 

edgesIgnoringSafeArea

 

edgesIgnoringSafeArea(_:) | Apple Developer Documentation

 

 

공식 문서를 찾아보니 edgesIgnoringSafeArea는 말 그대로 SafeArea를 무시하도록 설정하는데 사용한다고 한다.

기본적으로 SwiftUI는 뷰를 안전 영역에 맞게 배치하고 레이아웃을 조정한다. 하지만 때때로 뷰를 안전 영역을 무시하도록 만들어야할 때 사용한다고 한다 

 

그래서 지금은 background color를 지정하는데 edgesIgnoringSafeArea(.bottom) 로 bottom만 무시하도록 하는 것이다.

옵션 중 .all이 바로 모든 SafeArea를 무시하고 뷰 전체의 background color를 바꾸게 된다.

 

자주 사용하게 될 것 같으니 edgesIgnoringSafeArea  잘 기억해두자~~~