The Util Designer
SwiftUI LazyHGrid 的使用
xcode 13.4.1, swift 5.5, iOS 15.4
2022-08-22
LazyVGrid 和 LazyHGrid 都是一種容器元件Container View，它們的作用是把其子元件以格子化來排列，這篇主要是講講LazyHGrid的簡單使用。
1. 在創建LazyHGrid時，首先要指定多少個rows，每個row的高度，其子元件就是從上到下，從左到右依次排列顯示出來。
import SwiftUI

struct GridExample: View {
    var body: some View {
        let rows = [
            GridItem(.fixed(50)),
            GridItem(.fixed(100)),
            GridItem(.fixed(200))
        ]
        LazyHGrid(rows: rows) {
            ForEach(0..<9) { i in
                Text("Item \(i)")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(.gray)
                    .padding(.bottom, 5)
            }
        }
    }
}
2. 我們試試把9個子元件加到100個元件，看看會怎麼樣。
import SwiftUI

struct GridExample: View {
    var body: some View {
        let rows = [
            GridItem(.fixed(50)),
            GridItem(.fixed(100)),
            GridItem(.fixed(200))
        ]
        LazyHGrid(rows: rows) {
            ForEach(0..<100) { i in
                Text("Item \(i)")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(.gray)
                    .padding(.bottom, 5)
            }
        }
    }
}
3. 從上面例子，太多子元件，會超出整個屏幕，可以結合ScrollView一起，並指明是水平拖動，就可以拖動看到所有的子元件。
import SwiftUI

struct GridExample: View {
    var body: some View {
        let rows = [
            GridItem(.fixed(50)),
            GridItem(.fixed(100)),
            GridItem(.fixed(200))
        ]
        ScrollView(.horizontal) {
            LazyHGrid(rows: rows) {
                ForEach(0..<100) { i in
                    Text("Item \(i)")
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(.gray)
                        .padding(.bottom, 5)
                }
            }
        }
    }
}