[SwiftUI] 네비게이션바 알 수 없는 여백 없애버리기

https://developer.apple.com/documentation/swiftui/view/navigationbartitledisplaymode(_:)

navigationBarTitleDisplayMode(_:) | Apple Developer Documentation

 

🚨 문제

SwiftUI에서 네비게이션바를 커스텀하기 위해 백 버튼을 숨기고 아래에 뷰를 작성하면 네비게이션바와 본문 뷰 사이에 알 수 없는 여백이 있는 경우가 있습니다.

.navigationBarBackButtonHidden()

 

 

 

 

🧑‍💻 코드

public struct SampleView: View {
  @State var title: String = "안녕하세유, 반가워유"
  
  public var body: some View {
    VStack {
      Text(title)
        .font(.system(size: 26, weight: .bold))
        .foregroundColor(.black)
        .padding()
      
      NavigationLink {
        ...
      } label: {
        ...
      }
      
      Spacer()
    }
    .background(Color.red.opacity(0.3))
    .navigationBarBackButtonHidden()
    .toolbar { toolbarContent() }
  }
  
  @ToolbarContentBuilder
  private func toolbarContent() -> some ToolbarContent {
    ...
  }
  
}

body 부분의 VStack을 연한 빨간색으로 감싸줬는데 위에 이미지처럼 알 수 없는 Top 여백이 생깁니다.

 

✅ 해결 방법

SwiftUI는 기본적으로 .large 속성을 갖고 있기 때문에 네비게이션바 높이가 높게 잡히기 때문에

아래 코드를 추가해줘서 위에 붙여주도록 합니다.

.navigationBarTitleDisplayMode(.inline)

번외로 .large로 한 경우 커스텀 없이 네비게이션을 만들면 아래처럼 보입니다.

.navigationTitle("네비게이션 타이틀")
.navigationBarTitleDisplayMode(.large)
.navigationBarBackButtonHidden()