SwiftUI Grid 사용하기

• 이번에는 SwiftUI에서 Grid를 어떻게 사용하는지에 대해 알아보겠습니다.

GridItem

• GridItem은 SwiftUI의 Grid 안에 들어가는 Item 정도로 생각하면됩니다.

• 다음과 같이 GridItem은 size, spacing, alignment를 인자 값으로 받는데요.
• spacing과 alignment는 여타 컴포넌트들과 마찬가지로 간격과 정렬을 위한 인자 값 입니다.
• 반면, size는 GridItem.Size Enum 타입인데요.
• adaptive, fixed, flexible과 같이 다양한 옵션을 제공합니다.

LazyHGrid

• 우선, 가장 간단한 fixed size 옵션의 GridItem row를 통해 LazyHGrid를 구현해보겠습니다.
• 가로 형태의 ScrollView 안에 LazyHGrid를 위치하게 하고, ForEach 문으로 Grid 안의 요소를 Color로 채워넣어 봤습니다.

struct ContentView: View {
  var rows: [GridItem] = Array(repeating: .init(.fixed(50)), count: 1)
  
  var body: some View {
    ScrollView(.horizontal) {
      LazyHGrid(rows: rows, alignment: .center) {
        ForEach((0...19), id: \.self) { _ in
          Color(red: .random(in: 0...1), green: .random(in: 0...1), blue: .random(in: 0...1))
            .cornerRadius(15)
            .frame(width: 50, height: 50)
            .padding()
        }
      }
    }
  }
}

• 코드는 다음과 같은 결과를 보여줍니다.

LazyVGrid

• 그 다음은 flexible size 옵션의 GridItem column을 통해 LazyVGrid를 구현해보겠습니다.
• 세로 형태의 ScrollView 안에 LazyVGrid를 위치하게 하고, ForEach 문으로 Grid 안의 요소를 Color로 채워넣어 봤습니다.

struct ContentView: View {
  var columns: [GridItem] = Array(repeating: .init(.flexible()), count: 2)
  
  var body: some View {
    ScrollView {
      LazyVGrid(columns: columns) {
        ForEach((0...19), id: \.self) { _ in
          Color(red: .random(in: 0...1), green: .random(in: 0...1), blue: .random(in: 0...1))
            .cornerRadius(15)
            .frame(width: 150, height: 150)
            .padding()
        }
      }
    }
  }
}

• 코드는 다음과 같은 결과를 보여줍니다.

마무리

• 이렇게 해서 SwiftUI에서 어떻게 Grid를 사용하는지에 대해 알아봤습니다.