SwiftUI中如何实现TabView页面循环滚动？

SwiftUI原生的TabView(.page)样式没有直接提供循环滚动的选项，但可以通过添加副本页面+索引跳转的技巧，实现无缝循环效果，具体实现如下：

核心思路 #

在原始页面的首尾各添加一个副本页面，当用户滑动到副本页时，立刻无声切换到对应的真实页面，借助动画让切换过程无感知，从而模拟循环滚动的体验。

完整代码示例 #

struct ContentView: View {
    // 原始页面的数量
    private let originalPageCount = 4
    // 当前显示的页面索引（包含首尾的副本页）
    @State private var currentDisplayIndex = 1
    
    var body: some View {
        VStack {
            TabView(selection: $currentDisplayIndex) {
                // 最后一页的副本，放在最前面
                Text("Fourth")
                    .tag(0)
                
                // 原始内容页面
                Text("First")
                    .tag(1)
                Text("Second")
                    .tag(2)
                Text("Third")
                    .tag(3)
                Text("Fourth")
                    .tag(4)
                
                // 第一页的副本，放在最后面
                Text("First")
                    .tag(5)
            }
            .tabViewStyle(.page(indexDisplayMode: .never)) // 隐藏默认页码指示器，避免显示额外页数
            
            // 自定义页码指示器（可选）
            HStack(spacing: 8) {
                ForEach(1...originalPageCount, id: \.self) { originalIndex in
                    Circle()
                        .frame(width: 8, height: 8)
                        .foregroundColor(getIndicatorColor(for: originalIndex))
                }
            }
            .padding(.bottom)
        }
        .onChange(of: currentDisplayIndex) { newIndex in
            // 滑动到最前的副本页，跳转到真实的最后一页
            if newIndex == 0 {
                withAnimation {
                    currentDisplayIndex = originalPageCount
                }
            }
            // 滑动到最后的副本页，跳转到真实的第一页
            else if newIndex == originalPageCount + 1 {
                withAnimation {
                    currentDisplayIndex = 1
                }
            }
        }
    }
    
    // 自定义页码指示器的颜色匹配逻辑
    private func getIndicatorColor(for originalIndex: Int) -> Color {
        switch currentDisplayIndex {
        case 0:
            return originalIndex == originalPageCount ? .blue : .gray
        case originalPageCount + 1:
            return originalIndex == 1 ? .blue : .gray
        default:
            return currentDisplayIndex == originalIndex ? .blue : .gray
        }
    }
}

关键细节说明 #

1. 副本页面：首尾的副本页与真实页面内容完全一致，用户滑动时不会察觉到差异
2. 无缝跳转：通过onChange监听索引变化，触发副本页索引时用withAnimation切换到对应真实页面，动画让过渡自然无感知
3. 自定义页码：默认页码会显示额外的副本页，因此需要自己实现指示器，匹配真实页面的数量

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