[SwiftUI-기초] Scrolling Grid

수직그리드

• 엑셀에 보면 row와 column 으로 나뉜것과 같은 효과를 줄 수 있는 View 입니다. 

struct ContentView: View {
    let layout = [
        GridItem(.fixed(80)),
        GridItem(.fixed(80)),
        GridItem(.fixed(80))
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: layout) {
                ForEach(0..<1000) {
                    Text("Item \($0)")
                }
            }
        }

    }
}

• 특이점으로는 기본적으로 Lazy Grid를 사용한다는점.. 
• 그리고 몇개의 컬럼이 필요할지, 몇개의 로우가 필요할지를 Layout 으로 잡는 다는 점 이외에는 똑같습니다. 

가변폭 그리드

• 근데 보면 layout 의 아이템으로 gridItem(.fixed(80)) 이라는 것이 있는데요. 
  • 한 칸이 80 너비를 사용한다고 보입니다. 
• 그런데 말입니다.. 이렇게 고정된 값을 사용하면, 별로 좋지않아요. 기기마다 화면의 크기가 제각각인데 일관된 뷰를 그릴수 없게 됩니다. 

let layout = [
    GridItem(.adaptive(minimum: 80)),
]

• 이런식으로 적응형으로 선언할 수도 있습니다.
• "최소한 80은 되어야한다" 고 선언하는 것이죠.

let layout = [
    GridItem(.adaptive(minimum: 80, maximum: 120)),
]

• 이렇게도 선언할 수 있습니다.
• "최소 80은 보장하고, 최대로 120 이상 넘을 순 없다"

수평 그리드

• 수직으로 그리드를 그린다면 당연히 수평으로도 그릴수 있습니다.

ScrollView(.horizontal) {
    LazyHGrid(rows: layout) {
        ForEach(0..<1000) {
            Text("Item \($0)")
        }
    }
}

• lazyHGrid 줄에 column 대신 row 로 변경된것도 깨알이네요. 
• LazyVGrid -> LazyHGrid 
• ScrollView 옆에 .horizontal 도 붙어줬네요.