SwiftUI ScrollView 捲動視圖教學

當你的內容超過螢幕範圍時，就需要使用 ScrollView 來讓使用者捲動查看。

基礎語法

ScrollView 的用法非常簡單，只需要將你的內容包在 ScrollView 裡即可。

ScrollView {
    VStack(spacing: 20) {
        ForEach(0..<20) { i in
            Text("項目 \(i)")
                .padding()
                .frame(maxWidth: .infinity)
                .background(.gray.opacity(0.2))
        }
    }
    .padding()
}

注意：ScrollView 內部通常會放一個 Stack (如 VStack)，否則如果放多個 View，它們會被視為獨立的組件而不是一個整體。

捲動方向 (Axes)

你可以指定 ScrollView 的捲動方向。

.vertical: 垂直捲動 (預設值)。
.horizontal: 水平捲動。
[]: 兩個方向都不捲動 (等於不可捲動)。

水平捲動範例

ScrollView(.horizontal, showsIndicators: false) { // 隱藏捲軸
    HStack {
        ForEach(0..<10) { i in
            Rectangle()
                .fill(.blue)
                .frame(width: 100, height: 100)
        }
    }
}

showsIndicators: false: 可以隱藏捲動條 (Scroll Bar)。

Safe Area 的影響

預設情況下，ScrollView 的內容在捲動時會穿過安全區域 (Safe Area) 的背後（例如 iPhone 的瀏海或底部 Home Indicator 區域）。這通常是我們想要的效果，讓內容看起來是滿版的。

如果你不希望這樣，可以使用 .clipped() 或調整安全區域設定，但大多數情況下預設行為是最佳的。

效能注意事項

ScrollView 會一次性載入其內部的所有 View。如果你有 1000 個項目，它就會一次建立 1000 個 Text，這會造成效能問題。

對於大量資料的列表，應該使用 LazyVStack 或 List，它們只會建立即將出現在螢幕上的 View (Lazy Loading)。

ScrollView {
    LazyVStack { // 使用 LazyVStack 取代 VStack
        ForEach(0..<1000) { i in
            Text("項目 \(i)")
        }
    }
}

學會 ScrollView 後，我們可以進一步學習如何製作網格排版 (Grid Layout)。