SwiftUI : List를 이용해서 Grid형식 만들기

SwiftUI : Lazy V(H)Grid

 

List View를 통해 Grid형식으로

이번에는 List view를 통해서 grid형식으로 화면을 구성하도록 하려고 합니다. 일단 아래 이미지를 Assets 폴더에 넣어주겠습니다. 

pancake.jpg

2.30MB

(출처: unsplash.com/photos/8Nc_oQsc2qQ)

 

이미지파일을 Assets에 넣어줬으면, 이제 ContentView로 가서 아래와 같이 코드를 작성해줍니다. 일단 List 안에 HStack을 쌓아주고 ForEach로 2개의 이미지를 보여주도록 하겠습니다. 그리고, Image로 "pancake"을 불러와주겠습니다.

struct ContentView: View {
    var body: some View {
        List {
                HStack {
                    ForEach(0..<2) { _ in
                        Image("pancake")
                            .resizable()
                            .renderingMode(.original)
                            .scaledToFill()
                            .padding(.all, 5)
                    }
                }
            }
        }
    }

화면에는 위 사진과 같이 두 개의 사진이 Horizontal로 나타나고 그아래는 빈 공간 이죠?

 

두 사진을 아래에 더 추가하고 싶다면, List에 ForEach문을 넣어주면 가능합니다.

struct ContentView: View {
    var body: some View {
        List {
            //이미지 8줄을 추가함
            ForEach(0..<8) { _ in
                HStack {
                    ForEach(0..<2) { _ in
                        Image("pancake")
                            .resizable()
                            .renderingMode(.original)
                            .scaledToFill()
                            .padding(.all, 5)
                    }
                }
            }
        }
    }
}

이렇게 자동으로 스크롤이 생기고, Grid형식처럼 뷰를 형성하게 됐습니다.

 

아래 디버깅을 보면 2개씩 이미지가 로드되었고(HStack ForEach부분), 그 이미지들이 아래로 복사되었습니다.(List ForEach부분).

 

읽어주셔서 감사합니다🤟

 

본 게시글의 전체코드 GitHub 👇🏻

Seogun95/SwiftUI_Creating-Grid-using-List

다음 포스팅👇🏻

SwiftUI Project3 : List view를 사용하여 Grid 만들기