SwiftUIのLazyVGridを試す

SwiftUIでUICollectionViewをUIKitを使わずにどう実現するんだ？と思い調べていたら LazyVGrid を発見。試す！

開発環境

> xcodebuild -version
Xcode 13.1
Build version 13A1030d

StackとGridの棲み分け

Stackはすべて生成しきってから表示、Grid*1は必要になったら生成して表示する。

GridはStackの表示速度向上のために使って、基本的にはStackをまず使うことが想定されている。

書いてみた

スクリーンショット

コード

import SwiftUI

struct ContentView: View {
    var columns = [
        GridItem(spacing: 10),
        GridItem(spacing: 10),
        GridItem(spacing: 10),
        GridItem(spacing: 0),
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 10) {
                ForEach((0...10), id: \.self) { i in
                    ZStack {
                        Rectangle().foregroundColor(.indigo)
                            .aspectRatio(1,contentMode: .fill)
                            .border(Color.gray)
                        Text("\(i)")
                            .foregroundColor(.white)
                    }
                }
            }
        }
    }
}

メモ

WWDCの動画（Stacks, Grids, and Outlines in SwiftUI - WWDC20）見て分からなかった単語をメモ。

• on demand: "要求された時に"
• memory footprint: プログラムが実行中に使用、占有しているメインメモリの合計量

参考

• LazyVGrid | Apple Developer Documentation
• Stacks, Grids, and Outlines in SwiftUI - WWDC20 - Videos - Apple Developer

*1:2022/03/26現在、SwiftUIのGridにはすべてLazyのprefixが付いている。