반응형

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-position-views-in-a-grid]

 

How to position views in a grid

 

SwiftUI는 수직 레이아웃 전용으로 VSStack과 수평 레이아웃 전용으로 HStack을 제공하지만, 두가지 모두 수행하는 것은 없습니다 - 그리드 구조에서 뷰를 배치할 수 있는 것은 없습니다.

 

다행히 SwiftUI의 뷰 빌더(builder) 시스템을 활용해서 직접 작성할 수 있습니다. 이는 행(row)과 열(count) 갯수를 사용해서 작성해야 하는 타입을 만드는 것을 의미하고, 그리드에서 주어진 셀에 대한 뷰를 찾아 실행하기 위해 클로져를 작성합니다. body의 내부에 모든 행과 열에 대해 반복해서 VStack HStack 내부에 셀을 만들어서 그리드를 만들수 있으며, 뷰 클로져를 호출때마다 셀 안에 무엇이 있는지를 묻습니다.

 

코드는 다음과 같습니다.

struct GridStack<Content: View>: View {
    let rows: Int
    let columns: Int
    let content: (Int, Int) -> Content

    var body: some View {
        VStack {
            ForEach(0 ..< rows) { row in
                HStack {
                    ForEach(0 ..< self.columns) { column in
                        self.content(row, column)
                    }
                }
            }
        }
    }

    init(rows: Int, columns: Int, @ViewBuilder content: @escaping (Int, Int) -> Content) {
        self.rows = rows
        self.columns = columns
        self.content = content
    }
}

 

SwiftUI 뷰에서 사용하고자 할때, 다음과 같이 작성합니다.

GridStack(rows: 4, columns: 4) { row, col in
    Image(systemName: "\(row * 4 + col).circle")
    Text("R\(row) C\(col)")
}

 

각 셀안에 이미지와 텍스트가 있는 4x4 그리드를 만듭니다.

반응형
Posted by 까칠코더
,