如何获取分页ScrollView中当前显示视图的索引？

可以通过SwiftUI的scrollPosition绑定来实时追踪当前显示的分页视图，这个方案能解决onAppear仅触发一次的问题，页面回退时也会同步更新当前页码。

以下是修改后的完整代码，可直接复制到Xcode运行：

import SwiftUI

struct PagingScrollView<Content: View>: View {
    var pageCount: Int
    var viewForPage: (Int) -> Content
    @Binding var currentPage: Int // 添加绑定属性追踪当前页码

    var body: some View {
        GeometryReader { geo in
            ScrollView (.horizontal) {
                HStack (spacing: 0) {
                    ForEach(0..<pageCount, id:\.self) { index in
                        viewForPage(index)
                            .frame(width: geo.size.width, height: geo.size.height)
                    }
                }
                .scrollTargetLayout()
            }
            .scrollTargetBehavior(.paging)
            .scrollPosition(id: $currentPage) // 绑定滚动位置到当前页码
        }
    }
}

struct PreviewView: View {
    @State private var currentPage = 0 // 存储当前页码的状态变量

    var body: some View {
        VStack {
            Text("当前显示页面：\(currentPage)")
                .font(.title)
                .padding()
            PagingScrollView(
                pageCount: 10,
                viewForPage: getView(index:),
                currentPage: $currentPage // 传递绑定
            )
        }
    }

    func getView(index: Int) -> some View {
        Text("View: \(index)")
            .font(.largeTitle)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(index % 2 == 0 ? Color.blue.opacity(0.2) : Color.green.opacity(0.2))
    }
}

#Preview {
    PreviewView()
}

关键说明 #

• @Binding var currentPage: Int：让父视图可以和分页ScrollView共享当前页码状态
• .scrollPosition(id: $currentPage)：该修饰符会自动识别当前处于视口内的滚动目标ID（这里就是页面索引），在分页切换时实时更新绑定的变量
• 配合.scrollTargetBehavior(.paging)和等宽的子视图，scrollPosition会精准对应当前完全显示的页面

内容的提问来源于stack exchange，提问作者the Reverend