前幾天我們介紹了基本的 Layout 元件（如 VStack、HStack）。在 SwiftUI 中，如果要建立「大量列表」或「可捲動的排版」，我們會用到 ScrollView，以及更進階的 Lazy 系列容器。

Lazy 容器的最大特點是：只會建立螢幕上顯示的項目，能有效節省記憶體並提升效能。

ScrollView

ScrollView提供可捲動區域。

但需要注意的是，它會一次建立所有子 View，即使畫面上沒有顯示，也會先生成，因此資料量大時容易造成效能問題。

struct ScrollViewExample: View {
    var body: some View {
        ScrollView(.vertical) {
            VStack {
                ForEach(1..<50) { i in
                    Text("項目 \(i)")
                        .padding()
                }
            }
        }
    }
}

Lazy 容器

Lazy 容器的特色是延遲載入 (Lazy Loading)。

只有當元素出現在畫面範圍內時，才會建立對應的 View，完美解決 ScrollView 的效能瓶頸。

LazyVStack

與 VStack 相同，但是能延遲載入項目，適合 大量清單。

struct LazyVStackExample: View {
    var body: some View {
        ScrollView(.vertical) {
            LazyVStack {
                ForEach(1..<50) { i in
                    Text("項目 \(i)")
                        .padding()
                }
            }
        }
    }
}

LazyHStack

與 HStack 相同，但是能延遲載入項目，適合 大量清單。

struct LazyHStackExample: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 8) {
                ForEach(1..<50) { i in
                    VStack(alignment: .leading) {
                        Image(systemName: "square.and.arrow.up")
                            .resizable()
                            .frame(width: 44, height: 44)
                        Text("項目 \(i)")
                    }
                }
            }
        }
    }
}

LazyVGrid

垂直方向捲動，橫向多欄排列。適合用在 圖片牆、商品清單。

let columns = [
    GridItem(.flexible()), 
    GridItem(.flexible())
]

ScrollView {
    LazyVGrid(columns: columns) {
        ForEach(1..<50) { i in
            Text("項目 \(i)")
                .frame(height: 50)
                .background(Color.blue.opacity(0.2))
        }
    }
}

LazyHGrid

水平方向捲動，縱向多列排列。適合用在 時間軸、行事曆。

let rows = [
    GridItem(.flexible()), 
    GridItem(.flexible())
]

ScrollView(.horizontal) {
    LazyHGrid(rows: rows) {
        ForEach(1..<50) { i in
            Text("項目 \(i)")
                .frame(width: 100)
                .background(Color.green.opacity(0.2))
        }
    }
}

今日小結

• ScrollView：建立可捲動區域，但一次載入全部項目
• LazyVStack：垂直堆疊，支援延遲載入
• LazyHStack：水平堆疊，支援延遲載入
• LazyVGrid：垂直捲動的多欄格狀排列
• LazyHGrid：水平捲動的多列格狀排列

明天會介紹導航與分頁，來了解如何切換頁面。