[iOS/SwiftUI] LazyVStack으로 Sticky Header 구현하기

일반 Stack과 다르게, Lazy 키워드가 붙은 LazyVStack과 LazyHStack은 각 아이템이 필요할 때 생성됩니다. 세미나에서 배운 LazyHGrid, LazyVGrid와 비슷한 방식이라고 할 수 있습니다.
VStak에 들어가는 내용이 엄청 많다면 Lazy로 관리해주는게 더 효율적이라고 합니다.

이번 주차 과제에서는 스티키헤더를 만들기 위해 LazyVStack의 pinnedViews를 이용했습니다.

 ScrollView {
 	LazyVStack(pinnedViews: [.sectionHeaders]) {
    	HeaderView()
                    
        Section(header: TabbarView(selectedTab: $selectedTab)) {...
        }
   }
   ...
}

pinnedViews 파라미터에는 두가지 타입이 있습니다.

header와 footer가 있는데요. 위쪽에 만들어줄거기 때문에 section Header를 파라미터에 넣어줬습니다.

그리고 스티키헤더로 만들어줄 부분을 Section(header:)에 넣어줍니다.

☄️발생했던 트러블 슈팅

스티키헤더 위의 세이프 에리아 부분에 콘텐츠가 계속 보였습니다. 탭뷰 부분만 검정색으로 처리해주어도 그 문제가 계속되었습니다.
이 아티클을 보고, ScrollView에 padding top을 줌으로써 뷰를 짤 때 safe are와 스크롤뷰가 처음부터 떨어져있도록 여백을 주어 해결했습니다.