Grid

2차원 레이아웃으로 다른 뷰를 정렬하는 컨테이너 뷰

 

기본 사용 방법

Grid {
            GridRow {
                Text("Row 1")
                ForEach(0..<2) { _ in Color.red }
            }
            GridRow {
                Text("Row 2")
                ForEach(0..<5) { _ in Color.green }
            }
            GridRow {
                Text("Row 3")
                ForEach(0..<4) { _ in Color.blue }
            }
            GridRow {
                Text("Row 4")
                ForEach(0..<6) { _ in Color.yellow }
            }
        }

 

.gridCellUnsizedAxes()

- 비어 있는 셀 만들기

struct grid1: View {
    var body: some View {
        Grid{
            GridRow{
                ForEach(0..<5) { i in
                    Text("\(i)")
                        .frame(width: 60, height: 60)
                        .background(.mint)
                }
            }
                
            GridRow{
                ForEach(5..<10) { i in
                    Text("\(i)")
                        .frame(width: 60, height: 60)
                        .background(.mint)
                }
            }
        }
    }
}

struct grid2: View {
    var body: some View {
        Grid{
            GridRow{
                ForEach(0..<5) { i in
                    Text("\(i)")
                        .frame(width: 60, height: 60)
                        .background(.mint)
                }
            }
                
            GridRow{
                ForEach(5..<10) { i in
                    if (i % 2 == 0) {
                        Text("\(i)")
                            .frame(width: 60, height: 60)
                            .background(.mint)
                    }
                    else {
                        Color.clear
                            .gridCellUnsizedAxes([.horizontal, .vertical])
                    }
                }
            }
        }
    }
}