SwiftUI에서 그리드 아이템을 한꺼번에 보여 주지 않고 12 개씩 나누어서 보여 주기

100개 아이템을 초기 20를 보여 줍니다. 그리고 "더 보기" 버튼 클릭 시 12개씩 추가적으로 보여 줍니다.

 

data 배열에 prefix를 이용합니다.

 

LazyVGrid는 SwiftUI에서 그리드 레이아웃을 만들기 위한 컨테이너 뷰 중 하나입니다. 이 뷰는 데이터의 컬렉션을 가져와 그리드 형식으로 표시하는 데 사용됩니다. 각 항목은 그리드의 셀에 배치되며, 필요에 따라 필요한 만큼만 렌더링됩니다.

 

import SwiftUI

struct ContentView: View {
    let data = (1...100).map { "Item \($0)" }
    @State private var visibleItemCount = 20 // 초기에 보이는 항목 수
    @State private var additionalItems = 12
    
    func loadMoreItems() {
        if visibleItemCount + additionalItems <= data.count {
            visibleItemCount += additionalItems
        } else {
            visibleItemCount = data.count
        }
    }

    var body: some View {
        ScrollView {
            LazyVGrid(columns: Array(repeating: GridItem(), count: 3), spacing: 10) {
                ForEach(data.prefix(visibleItemCount), id: \.self) { item in
                    Text(item)
                        .frame(width: 100, height: 50) // 각 셀의 크기 조절
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }
            }
            if visibleItemCount < data.count {
                Button(action: {
                    // "더 보기" 버튼 클릭 시 추가 항목 표시
                    loadMoreItems()
                }) {
                    Text("더 보기")
                }
                .padding()
            }
        }
    }
}

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

 

그림 1. 첫 실행 20개 아이템 화면

 

 

그림 2. "더 보기" 버튼 클릭 후 12개 아이템 추가한 화면