如何在macOS上创建SwiftUI分页滚动视图？

由于macOS的SwiftUI中TabView仅支持.automatic样式，无法直接复用iOS上的.page分页方案，我们可以通过自定义滚动视图结合手势的方式实现分页效果，以下是具体实现：

自定义分页视图实现 #

import SwiftUI

struct PagingView<Content: View>: View {
    let content: Content
    let pageCount: Int
    @State private var currentPage = 0
    @GestureState private var translation: CGFloat = 0
    
    init(pageCount: Int, @ViewBuilder content: () -> Content) {
        self.pageCount = pageCount
        self.content = content()
    }
    
    var body: some View {
        VStack(spacing: 20) {
            GeometryReader { proxy in
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(spacing: 0) {
                        content
                            .frame(width: proxy.size.width, height: proxy.size.height)
                    }
                }
                .content.offset(x: -CGFloat(currentPage) * proxy.size.width + translation)
                .gesture(
                    DragGesture()
                        .updating($translation) { value, state, _ in
                            state = value.translation.width
                        }
                        .onEnded { value in
                            let offsetRatio = value.translation.width / proxy.size.width
                            let targetPage = max(0, min(pageCount - 1, currentPage - Int(offsetRatio.rounded())))
                            withAnimation {
                                currentPage = targetPage
                            }
                        }
                )
            }
            
            // 页码指示器
            HStack(spacing: 8) {
                ForEach(0..<pageCount, id: \.self) { index in
                    Circle()
                        .fill(index == currentPage ? Color.accentColor : Color.gray.opacity(0.3))
                        .frame(width: 8, height: 8)
                }
            }
        }
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        PagingView(pageCount: 4) {
            Text("First")
                .background(Color.blue.opacity(0.2))
            Text("Second")
                .background(Color.green.opacity(0.2))
            Text("Third")
                .background(Color.yellow.opacity(0.2))
            Text("Fourth")
                .background(Color.red.opacity(0.2))
        }
        .frame(height: 300)
        .padding()
    }
}

实现说明 #

• 自定义PagingView封装了分页核心逻辑，只需传入页面数量和对应内容即可快速复用
• 通过ScrollView实现横向滚动，配合DragGesture监听拖拽动作，计算偏移比例确定目标页面，结束拖拽时通过动画平滑切换
• 底部的圆形指示器直观展示当前页面位置，选中页面使用主题色高亮，未选中页面用半透明灰色区分

如果需要自动轮播、无限滚动等复杂功能，可以基于这个基础版本扩展，也可以使用成熟的SwiftUI分页库（如SwiftUIPager）来快速实现。

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