【SwiftUI】LazyHStack・LazyVStackの使い方

今回はiOS14から登場した LazyHStackLazyVStack の使い方について解説します。

LazyHStack・LazyVStackの使い方

「Lazy」が付いていない HStackVStack との違いは「必要な分だけ読み込む」ところです。必要な分というのは、つまり、見えているところだけという意味です。

例えば 10000個のテキストを HStackVStack で表示しようとすると一気にメモリを枯渇させてしまいますが、LazyHStackLazyVStack は画面に表示される分だけ順次メモリにロードしてくれます。

基本的に、LazyHStackLazyVStackScrollView と組み合わせて使います。何千、何万のデータを扱う場合は当然画面に収まらないわけですから、必然的に ScrollViewLazyHStackLazyVStack の出番となります。

LazyHStackLazyVStack のそれぞれの例を見ていきます。

LazyHStack の例

延々と横にスクロールしていきます。

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(1...100000, id: \.self) {
                    Text("Column \($0)")
                }
            }
        }
    }
}

LazyVStack の例

こちらは延々と縦にスクロールしていきます。

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical) {
            LazyVStack {
                ForEach(1...100000, id: \.self) {
                    Text("Row \($0)")
                }
            }
        }
    }
}

どちらも 1,000,00010,000,000 と増やしても挙動は変わりません

上記の例の LazyHStackLazyVStackHStackVStack に変えてみて実行すると以下の様なエラーが出力され、画面には何も表示されません。

また、既存の List もスクロールするものですが、LazyHStackLazyVStack と組み合わせても期待する動作(メモリの節約)はしてくれません

以上

【おすすめの関連記事】