SwiftUI를 이용한 그리드 그리기 (LazyVGrid)

 

Grid 뷰는 horizontal Direction 으로 사진을 배열하여 화면을 구성하기 쉽다.

 

기본 코드

struct ContentView: View {
    let data = Array(1...1000).map { "목록 \($0)"}

    let columns = [
        GridItem(.adaptive(minimum: 100))
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 20) {
                ForEach(data, id: \.self) { i in
                    VStack {
                        Capsule()
                            .fill(Color.yellow)
                            .frame(height: 50)
                        Text(i)
                            .forgroundColor(.secondary)
                    }
                }
            }
            .padding(.horizontal)
        }
    }
}

• GridItem(.adaptive(minimum: )) 레이아웃 최소 사이즈를 정한 후 화면을 그리드 형식으로 꽉 채울 수 있다. GridView 만 이용할 경우 화면을 초과한 경우 보이지 않기 때문에 ScrollView 도 추가한다.
• 표현할 그리드의 개수나 크기를 지정

 

실행 화면

 

GridItem 속성

• .adaptive() : 레이아웃 사이즈를 지정
• .flexibel() : 최솟값과 최대값을 할당해줘도 되지만, 모두 쓰지 않으면 기본값으로 자동으로 화면을 꽉 채움

---

개발자 Document

Apple Developer Documentation

Apple Developer Documentation