SwiftUI의 Grid 뷰

Posted on | In

개요

SwiftUI에서 Grid 뷰에 대해서 알아보고 사용법을 익혀보겠다.

인스타그램과 같은 형태를 생각하면 된다.

애플 공식문서



Lazy?

Lazy 키워드

Lazy로 시작하는 레이아웃 컨테이너들도 화면에 그려야할 뷰들만 계산한다 그러지 않은 뷰들은 생성하지 않고 있는다.

간단하게 인스타를 내리는데 LazyVGrid로 선언된 부분은 띄우고 있지 않다가 사용자가 스크롤을 내려 그려야할 필요가 생기면 계산하여 그린다.



LazyV(H)Grid

그냥 격자무늬처럼 원하는 뷰를 뿌려주는 역할을 한다.

인스타그램 생각하면된다.

1
2
3
4
5
6
LazyVGrid(columns: [GridItem(.adaptive(minimum: 65))]) {
                    ForEach(emojis[0..<emojiCount], id: \.self) { emoji in
                        CardView(content: emoji)
                            .aspectRatio(2/3, contentMode: .fit)
                    }
}



생성자

init(columns: [GridItem], alignment: HorizontalAlignment = .center, spacing: CGFloat? = nil, pinnedViews: PinnedScrollableViews = .init(), content: () -> Content)

  • columns : grid의 각 행의 사이즈와 위치들의 정보를 담고있는 배열
  • alignment : grid의 정렬
  • spacing : grid의 공백
  • pinnedViews : grid의 header 혹은 footer가 다음 파트까지 고정되는지의 여부
  • content :