14. [SwiftUI] LazyVGrid, LazyHGrid, GridItems

Lazy 를 통해 좀 더 효율적으로 데이터 로드가 가능

(lazy 아니면 일부 데이터만 필요한데, 전체 데이터 로드하는 경우가 생길 수 있음)

.fixed()

.flexible(minimum:, maximum:)

flexible을 자주 사용.

adpative(minimum:, maximum:)

인서타 느낌

spacing(GridItem의 스페이싱은 컬럼 간, LazyVGrid의 스페이싱은 로우 간)

 

스크롤뷰와 함께 응용 (pinnedViews에 header)

 

LazyHGrid는 방향만 Horizontal이고 다 동일하다.

//  Created by Toughie on 2023/04/19.
//

import SwiftUI

struct Grids: View {
    let colors: [Color] = [Color.blue, Color.red, Color.yellow]
    let columns: [GridItem] = [
        GridItem(.flexible(), spacing: 6, alignment: nil),
        GridItem(.flexible(), spacing: 6, alignment: nil),
        GridItem(.flexible(), spacing: 6, alignment: nil)
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(
                columns: columns,
                alignment: .center,
                spacing: 6,
                pinnedViews: [.sectionHeaders]) {
                    Section(header:
                                Text("Rectangles")
                        .foregroundColor(Color.black)
                        .font(.title)
                        .frame(maxWidth: .infinity, alignment: .center)
                        .background(Color.white)
                        .padding()
                    ) {
                        ForEach(0..<20) { index in
                            Rectangle()
                                .frame(height: 120)
                                .foregroundColor(colors[Int.random(in: 0..<3)])
                        }
                    }
                    
                    Section(header:
                                Text("Circles")
                        .foregroundColor(Color.black)
                        .font(.title)
                        .frame(maxWidth: .infinity, alignment: .center)
                        .background(Color.white)
                        .padding()
                    ) {
                        ForEach(0..<20) { index in
                            Circle()
                                .frame(height: 120)
                                .foregroundColor(colors[Int.random(in: 0..<3)])
                        }
                    }
                    
                    Section(header:
                                Text("Stars")
                        .foregroundColor(Color.black)
                        .font(.title)
                        .frame(maxWidth: .infinity, alignment: .center)
                        .background(Color.white)
                        .padding()
                    ) {
                        ForEach(0..<20) { index in
                            Image(systemName: "star.fill")
                                .resizable()
                                .scaledToFit()
                                .frame(width:120, height: 120)
                            
                                .foregroundColor(colors[Int.random(in: 0..<3)])
                        }
                    }
                }
        }
    }
}

struct Grids_Previews: PreviewProvider {
    static var previews: some View {
        Grids()
    }
}