如何在SwiftUI中实现PageView的自动循环滚动（首尾衔接）

要实现TabView（PageStyle）的无限循环滚动，核心思路是在真实页面的首尾添加镜像页面，通过监听页面切换事件，在滚动到镜像页面时无缝切回对应的真实页面，模拟循环效果。

完整实现代码 #

struct PageControllerView: View {
    // 真实页面数据源
    private let realPages: [AnyView] = [
        AnyView(Text("page 1")),
        AnyView(Text("page 2")),
        AnyView(Text("page 3"))
    ]
    
    // 构建带镜像页面的数据源：末尾镜像 + 真实页面 + 开头镜像
    private var displayPages: [AnyView] {
        [realPages.last!] + realPages + [realPages.first!]
    }
    
    // 当前选中索引，初始值设为1（对应第一个真实页面，跳过开头的镜像页面）
    @State private var currentIndex = 1
    
    var body: some View {
        TabView(selection: $currentIndex) {
            ForEach(0..<displayPages.count, id: \.self) { index in
                displayPages[index]
                    .tag(index)
            }
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
        .onChange(of: currentIndex) { newIndex in
            // 滚动到末尾的镜像页面（第一个真实页面的副本），切回第一个真实页面
            if newIndex == displayPages.count - 1 {
                withAnimation(.none) {
                    currentIndex = 1
                }
            }
            // 滚动到开头的镜像页面（最后一个真实页面的副本），切回最后一个真实页面
            else if newIndex == 0 {
                withAnimation(.none) {
                    currentIndex = realPages.count
                }
            }
        }
    }
}

关键逻辑说明 #

• 镜像页面构建：在真实页面数组的头部添加最后一个页面的副本，尾部添加第一个页面的副本，这样滚动到“假的最后一页”时，视觉上和第一页完全一致，滚动到“假的第一页”时和最后一页一致。
• 索引切换处理：通过onChange监听索引变化，当触发到镜像页面的索引时，直接修改currentIndex为对应真实页面的索引，并且禁用动画，避免出现跳转的突兀感，保持滚动的流畅性。
• 初始索引设置：初始值设为1，跳过开头的镜像页面，默认展示第一个真实页面。

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