第 49 章
使用 SwiftUI 偵測 ScrollView 中的捲動位置

在 SwiftUI 中使用捲動視圖時，其中一個常見問題是如何偵測捲動位置。 在 iOS 17 發布之前，開發人員必須拿出自己的解決方案來偵測滾動位置。 然而，新版本的 SwiftUI 更新了 ScrollView，新增了一個名為 scrollPosition 的新修飾器。 借助這項新功能，開發人員可以輕鬆識別正在滾動到的項目。

在本章中，我們將仔細研究這個新修飾器，並研究它如何幫助你偵測滾動視圖中的滾動位置。

使用 ScrollPosition 修飾符

讓我們從一個顯示 50 個項目的清單的簡單滾動視圖開始。

struct ColorListView: View {
    let bgColors: [Color] = [ .yellow, .blue, .orange, .indigo, .green ]

    var body: some View {
        ScrollView {
            LazyVStack(spacing: 10) {
                ForEach(0...50, id: \.self) { index in

                    bgColors[index % 5]
                        .frame(height: 100)
                        .overlay {
                            Text("\(index)")
                                .foregroundStyle(.white)
                                .font(.system(.title, weight: .bold))
                        }
                }
            }
        }
        .contentMargins(.horizontal, 10.0, for: .scrollContent)

    }
}

如果你熟悉在 SwiftUI 中實作捲動視圖，那麼以上的程式碼對你應該非常簡單。 我們利用「ForEach」循環來呈現 50 個顏色項，然後將其嵌入到垂直捲動視圖中。 如果你將此程式碼新增至 SwiftUI 專案中，就應該能夠預覽它並看到類似於圖 1 的內容。

要追蹤當前滾動位置或項目，你要先聲明一個狀態變數來保存該位置：

想更深入學習SwiftUI和下載完整程式碼？你可以從 AppCoda網站購買《精通 SwiftUI》完整電子版。