[SwiftUI] Lazy Grid

• 기본적으로 스크롤을 지원하지 않는다.
  • 원할 시 스크롤 뷰로 감싸면 된다.

LazyVGrid

struct LazyGrid: View {
    var items = AppleProduct.sampleList
    
    var body: some View {
        LazyVGrid(columns: [GridItem()]) {
            ForEach(items) { item in
                ProductGridItem(product: item)
            }
        }
        .padding()
    }
}

GridItem

• 배치를 결정하는 요소
• 생성자의 필수 파라미터
• 인라인 전달보다 속성 전달이 바람직하다(코드가 긴 경우가 상당수)
• 기본 GridItem 사용 시 개수만큼 균등 배치

struct LazyGrid: View {
    var items = AppleProduct.sampleList
    
    private let columns = [
        GridItem(),
        GridItem(),
        GridItem()
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns) {
                ForEach(items) { item in
                    ProductGridItem(product: item)
                }
            }
            .padding()
        }
    }
}

파라미터

private let columns = [
        GridItem(.fixed(100), spacing: nil, alignment: nil),
        GridItem(.fixed(200), spacing: nil, alignment: nil)
    ]

• 고정 너비 설정 가능
• 다만, GridItem의 고정너비 총 합이 화면보다 클 경우 clipping 된다.

---

flexible

• 기본값으로 사용된다.
• 너비가 충분할 땐 maximum값이 적용된다.(maximum값의 기본값은 .infinity)

private let columns = [
        GridItem(.flexible(minimum: 100, maximum: 300), spacing: nil, alignment: nil),
    ]

private let columns = [
        GridItem(.flexible(minimum: 100, maximum: 300), spacing: nil, alignment: nil),
        GridItem(.flexible(minimum: 100, maximum: 300), spacing: nil, alignment: nil)
    ]

---

adaptive

• 지정한 범위 내에서 가능한 한 많은 항목을 배치
• minimum값에 따라 배치가 달라지므로 가급적 충분한 크기로 하는 것이 좋음

private let columns = [
        GridItem(.adaptive(minimum: 100, maximum: 300), spacing: nil, alignment: nil)
    ]

• adaptive, fixed, flexible 전부 함께 사용 가능하다.
• 가령, 하나는 fixed로, 나머진 adaptive로 설정 가능

private let columns = [
        GridItem(.fixed(300), spacing: nil, alignment: nil),
        GridItem(.adaptive(minimum: 100, maximum: 300), spacing: nil, alignment: nil)
    ]

---

spacing

• nil이면 기본 여백으로 사용
• item 사이의 여백은 이처럼 column의 파라미터에서 조정하고, column사이의 여백은 LazyGrid의 spacing 파라미터로 조정하면 된다.

---

alignment

• 항목의 정렬 방식 결정
• 기본적으로 수직 가운데 정렬

private let columns = [
        GridItem(.adaptive(minimum: 200, maximum: 300), spacing: nil, alignment: .top)
    ]

---

LazyHGrid

struct LazyGrid: View {
    var items = AppleProduct.sampleList
    
    private let rows = [
        GridItem(.adaptive(minimum: 200, maximum: 300), spacing: nil, alignment: .leading)
    ]
    
    var body: some View {
        ScrollView(.horizontal) {
            LazyHGrid(rows: rows) {
                ForEach(items) { item in
                    ProductGridItem(product: item)
                }
            }
            .padding()
        }
    }
}