【SwiftUI】LazyHStack・LazyVStackの使い方

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

LazyHStack・LazyVStackの使い方

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

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

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

LazyHStack、LazyVStack のそれぞれの例を見ていきます。

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,000、10,000,000 と増やしても挙動は変わりません。

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

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

以上

【おすすめの関連記事】