SwiftUI Tutorials_ GridView

• KavSoft 의 튜토리얼 : Grid View

KavSoft 채널의 튜토리얼에 대한 내용을 하나씩 해보면서 SwiftUI에 대해 공부해보려고 합니다.

따라서 이 글은 위 튜토리얼에 대한 정리 글입니다.

 

 

• Xcode 14.0.1
• iOS 16.0

 

이번 내용은 Stack 을 사용해서 GridView 형태로 이미지를 그리는 것이다.

6장의 이미지를 준비하여 asset에 추가해 둔 뒤  한 행에 하나의 이미지를 column의 개수만큼 보여지도록 구현하였다.

** 코드는 일부 수정하여 영상과 조금 다를 수 있다.

 

이미지의 사이즈 또한 width와 height가 같도록 size를 두었다.

ScrollView의 frame을 설정한 이유는 그냥 없이 구현하니 스크롤 뷰의 width가 컨텐츠의 폭에 맞춰져 추가적으로 설정해주었다.

struct GridView: View {
    var body: some View {
        Grid()
    }
}

struct Grid: View {
    
    let row = 6
    let column = 3
    
    var body: some View {
        GeometryReader { geometry in
            let size = geometry.size.width / CGFloat(column) - 20
            ScrollView(.vertical, showsIndicators: false) {
                VStack {
                    ForEach(1..<(row+1), id: \.self) { i in
                        HStack {
                            ForEach(0..<column, id: \.self) { _ in
                                Image("img\(i)")
                                    .resizable()
                                    .frame(width: size)
                                    .cornerRadius(15)
                            }
                        }
                        .frame(height: size)
                    }
                }
            }
            .frame(width: geometry.size.width)
            .background(Color.yellow)
        }
    }
}

 

 

 

TIL 1.

Error: Cannot convert value of type 'ClosedRange<Int>' to expected argument type 'Range<Int>'

- 처음 ForEach를 상수로 작성했을 때 발생한 에러이다. 상수로 범위를 지정할 때는 closedRange(즉, ...)를 사용하면 에러가 발생한다.

- 우선 해결 방법은 1. Range타입으로 설정하거나(..<) 2. id를 지정해주면 에러는 사라진다.

- 해결법은 어렵지 않지만 왜인지 조금 궁금하다.

 

- 가장 기본적인 이유는 ClosedRange와 Range는 다른 타입이고, ForEach initializer에 ClosedRange를 제공해주지 않는다. 왜일까?

 

 

 

TIL 2.

Warning: Non-constant range: argument must be an integer literal

- Range 타입에서 숫자 대신 변수로 변경했을 때 발생한 경고문이다.

- 이 경우에도 id를 지정해주면 경고문이 사라진다.