【SwiftUI】LazyHGridの使用方法

はじめに

LazyVGridやLazyHGridを使用するとGridを作成することができます。
今回はLazyHGridの使用方法について紹介したいと思います。
(LazyVGridに関してはこちら)

環境

・ macOS: Monterey
・ Xcode: 13.2

公式ドキュメントを試す

まずは公式のドキュメントでコードが公開されているので試してみます。

var rows: [GridItem] =
        Array(repeating: .init(.fixed(20)), count: 2)
ScrollView(.horizontal) {
    LazyHGrid(rows: rows, alignment: .top) {
        ForEach((0...79), id: \.self) {
            let codepoint = $0 + 0x1f600
            let codepointString = String(format: "%02X", codepoint)
            Text("\(codepointString)")
                .font(.footnote)
            let emoji = String(Character(UnicodeScalar(codepoint)!))
            Text("\(emoji)")
                .font(.largeTitle)
        }
    }
}

横にスクロールができて、一定間隔で絵文字のコード＋絵文字が表示されます。
LazyVGridと比べると横へのGridになるのでScrollView(.horizontal)で使用する点やcolumnsからrowsで使用する点は縦軸と横軸の違いを感じます。その他は使用感としてはほぼ同じ印象です。

その他

let data = Array(1...100).map { "Index\($0)" }
let layout = [
    GridItem(.flexible(maximum: 80)),
    GridItem(.flexible(maximum: 100)),
    GridItem(.flexible(maximum: 150))
]
var body: some View {
    ScrollView(.horizontal) {
        LazyHGrid(rows: layout, spacing: 10) {
            ForEach(data, id: \.self) { item in
                LazyVStack {
                    Text("\(item)")
                    Rectangle()
                        .frame(height: 5)
                }
            }
        }
    }
}

layout内にあるGridItem(.flexible)の数が行数になります。またmaximumで指定したサイズは幅に影響します。横幅を指定したい場合はLazyVStackに対してframeでサイズを指定するとできます。

まとめ

LazyVGridと使用感は似ているので違和感なく使用できます。
写真など横にスクロールするViewでの活躍などがありそうだなと思いました。