Gird, LazyVGrid

struct ContentView: View {  
  var body: some View {
      Grid {
          GridRow {
              ForEach(1..<4) { index in
                  Image("image\(index)")
                      .resizable()
                      .aspectRatio(contentMode: .fit)
                      .cornerRadius(0)
                      .id(index)
              }
          }
          GridRow {
              ForEach((1..<4).reversed(), id: \.self) { index in
                  Image("image\(index)")
                      .resizable()
                      .aspectRatio(contentMode: .fit)
                      .cornerRadius(0)
                      .id(index)
              }
          }
      }

  }
}

 

.reversed() 를 통해 1,2,3...을 3,2,1...로 바꿀 수 있다. 

 

비동기 이미지 불러오기 

GridRow {
                  ForEach(1..<4, id: \.self) { _ in
                      Group {
                          if let image = image {
                              Image(uiImage: image)
                                  .resizable()
                                  .aspectRatio(contentMode: .fill)
                                  .frame(width: UIScreen.main.bounds.width/3, height: UIScreen.main.bounds.width/3)
                                  .clipped()
                          } else {
                              // 로딩 중에 표시할 뷰
                              ProgressView()
                          }
                      }
                      .onAppear {
                          loadImage()
                      }
                  }
              }

 

 

gridRow가 한 행임

거기 이미지를 몇개 넣는지에 따라 열 개수가 달라짐

 

 

 

import SwiftUI

struct ExploreGridView: View {
    //열이 몇개인지? 여기선 3개
    let gridItems = [
          GridItem(.flexible()),
          GridItem(.flexible()),
          GridItem(.flexible())
      ]
    
    var body: some View {
        NavigationView {
            ScrollView {
                LazyVGrid(columns: gridItems, spacing: 10) {
                    ForEach(0..<20) { index in
                        // 각 이미지를 표시하는 컴포넌트
                        Image("image\(index+1)")
                            .resizable()
                            .scaledToFill()
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                            .cornerRadius(10)
                            .clipped()
                            .onTapGesture {
                                // 이미지를 클릭했을 때 수행할 동작
                                print("이미지 \(index+1) 클릭됨")
                            }
                    }
                }
                .padding(10)
            }
            .navigationTitle("탐색")
        }
    }
}

struct ContentView: View {
    var body: some View {
        TabView {
            ExploreGridView()
                .tabItem {
                    Image(systemName: "magnifyingglass")
                    Text("탐색")
                }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

LazyVGrid를 사용하여 그리드 레이아웃을 생성하고, GridItem을 사용하여 각 열의 사이즈를 유연하게 조정합니다. ForEach를 사용하여 이미지를 반복하고, 클릭 이벤트를 처리하기 위해 onTapGesture를 추가했습니다.


LazyVGrid는 SwiftUI에서 그리드 형식의 레이아웃을 구현하기 위해 사용되는 컨테이너 뷰입니다. LazyVGrid를 사용하면 효율적으로 많은 수의 항목을 표시할 수 있으며, 스크롤 가능한 인터페이스를 구성할 수 있습니다.

LazyVGrid는 열의 개수와 열의 크기를 조정하는 columns 매개변수를 제공합니다. columns 매개변수는 GridItem의 배열로 구성되며, 각 GridItem은 열의 크기와 조정 방식을 지정합니다. 일반적으로 .flexible()을 사용하여 열의 크기를 유연하게 조정할 수 있습니다.

예를 들어, 아래의 코드에서 LazyVGrid를 사용하여 3개의 유연한 열을 가진 그리드 레이아웃을 생성합니다.

LazyVGrid(columns: [
    GridItem(.flexible()),
    GridItem(.flexible()),
    GridItem(.flexible())
]) {
    // 그리드에 표시될 항목들
}

이렇게 하면 3개의 유연한 열이 있는 그리드가 생성되며, 항목들이 열에 맞춰 자동으로 배치됩니다. LazyVGrid는 필요한 만큼의 항목만 인스턴스화하고 표시하기 때문에 성능적으로 효율적입니다.

LazyVGrid는 SwiftUI에서 대규모 데이터 목록이나 그리드 형식의 뷰를 구성할 때 유용하게 사용될 수 있습니다.