SwiftUI TabView能否支持5个以上条目？现有方案遇滚动问题

我有7个页面，之前用自定义手势实现页面切换，但体验生硬。SwiftUI的TabView在5个条目内表现不错，于是尝试用两个TabView配合顶部自定义滚动按钮栏实现7个页面切换，但方案无法滚动到第5个条目之后。想知道：

1. 该方案失效的原因
2. 可行的替代方案
3. 书籍这类多页面场景的处理方式
   当前环境：Xcode 14.0.1、iOS 16.0

此前自定义手势实现代码 #

switch page {
        case .EyeTest:
            EyeTestView(sd: $sd)
                .gesture(DragGesture(minimumDistance: swipeMin)
                    .onEnded { value in
                        if value.translation.width < -swipeMin { page = Page.Tone }
                    } )
        ...

尝试的双TabView方案代码 #

VStack() {
    ScrollViewReader { proxy in
    ScrollView(.horizontal, showsIndicators: false) {
        HStack() {
            pageButton(Page.EyeTest, "eyeglasses", "EyeTest", proxy)
            pageButton(Page.Tone, "pause.rectangle", "Tone", proxy)
            pageButton(Page.Chart, "square.grid.4x3.fill", "Chart", proxy)
            pageButton(Page.ByEye, "eye", "ByEye", proxy)
            pageButton(Page.List, "list.bullet", "List", proxy)
            pageButton(Page.Camera, "camera", "Camera", proxy)
            pageButton(Page.Settings, "gear", "Settings", proxy)
        }
    }
    .onAppear { proxy.scrollTo(Page.ByEye, anchor: .center) }
    .onChange(of: page) { page in
        withAnimation {
            proxy.scrollTo(page, anchor: .center)
        }
    }
}

if (page == Page.EyeTest || page == Page.Tone || page == Page.Chart) {
    TabView(selection:$page) {
        EyeTestView(sd: $sd).tag(Page.EyeTest)
        ToneView(sd: $sd).tag(Page.Tone)
        ChartView(sd: $sd).tag(Page.Chart)
        ByEyeView(sd: $sd).tag(Page.ByEye)
        ListView(sd: $sd).tag(Page.List)
    }.tabViewStyle(PageTabViewStyle(indexDisplayMode:.never))
} else {
    TabView(selection:$page) {
        ChartView(sd: $sd).tag(Page.Chart)
        ByEyeView(sd: $sd).tag(Page.ByEye)
        ListView(sd: $sd).tag(Page.List)
        CameraView(sd: $sd).tag(Page.Camera)
        SettingsView(sd: $sd).tag(Page.Settings)
    }.tabViewStyle(PageTabViewStyle(indexDisplayMode:.never))
}

一、双TabView方案失效原因 #

1. 视图销毁导致的交互断裂：当page切换到第4个（ByEye）及以后的条目时，会触发视图切换到第二个TabView，此时第一个TabView会被销毁。如果从第二个TabView的前几个页面（比如Chart、ByEye）向左滑动，系统尝试切换到第一个TabView的对应页面，但第一个TabView尚未渲染完成，直接导致滑动交互失效，无法切换到Camera、Settings这类第5个之后的页面。
2. 状态同步冲突：两个TabView共享同一个$page绑定，切换TabView实例时，TabView内部的页码状态和外部page值会出现不同步。尤其是滑动切换时，TabView的内部手势会覆盖外部状态更新逻辑，导致无法正确触发第5个条目之后的页面切换。

二、可行替代方案 #

方案1：单个TabView+自定义顶部栏（推荐） #

SwiftUI的TabView本身支持超过5个页面，只是默认底部标签栏会折叠成“更多”按钮，但我们可以隐藏默认底部栏，配合自定义顶部滚动按钮栏使用，完全不需要拆分TabView。

代码示例：

VStack(spacing: 0) {
    // 自定义顶部滚动按钮栏
    ScrollViewReader { proxy in
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 16) {
                pageButton(Page.EyeTest, "eyeglasses", "EyeTest", proxy)
                pageButton(Page.Tone, "pause.rectangle", "Tone", proxy)
                pageButton(Page.Chart, "square.grid.4x3.fill", "Chart", proxy)
                pageButton(Page.ByEye, "eye", "ByEye", proxy)
                pageButton(Page.List, "list.bullet", "List", proxy)
                pageButton(Page.Camera, "camera", "Camera", proxy)
                pageButton(Page.Settings, "gear", "Settings", proxy)
            }
            .padding(.horizontal, 16)
        }
        .onAppear { proxy.scrollTo(Page.ByEye, anchor: .center) }
        .onChange(of: page) { newPage in
            withAnimation {
                proxy.scrollTo(newPage, anchor: .center)
            }
        }
        .padding(.vertical, 8)
        .background(Color(.systemBackground))
    }
    
    // 单个TabView包含所有7个页面
    TabView(selection: $page) {
        EyeTestView(sd: $sd).tag(Page.EyeTest)
        ToneView(sd: $sd).tag(Page.Tone)
        ChartView(sd: $sd).tag(Page.Chart)
        ByEyeView(sd: $sd).tag(Page.ByEye)
        ListView(sd: $sd).tag(Page.List)
        CameraView(sd: $sd).tag(Page.Camera)
        SettingsView(sd: $sd).tag(Page.Settings)
    }
    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    .ignoresSafeArea(.all, edges: .bottom)
}

方案2：优化自定义手势实现 #

如果坚持用自定义手势，可以统一处理所有页面的左右滑动逻辑，避免逐个页面添加手势，同时添加过渡动画提升体验：

代码示例：

@State private var page: Page = .EyeTest
private let swipeMin: CGFloat = 50

var body: some View {
    ZStack {
        // 根据当前page显示对应视图
        currentView
            .transition(.asymmetric(insertion: .move(edge: .trailing), removal: .move(edge: .leading)))
    }
    .gesture(
        DragGesture(minimumDistance: swipeMin)
            .onEnded { value in
                withAnimation {
                    if value.translation.width < -swipeMin {
                        // 向右滑动，切换到下一页
                        page = page.next()
                    } else if value.translation.width > swipeMin {
                        // 向左滑动，切换到上一页
                        page = page.previous()
                    }
                }
            }
    )
}

private var currentView: some View {
    switch page {
    case .EyeTest:
        EyeTestView(sd: $sd)
    case .Tone:
        ToneView(sd: $sd)
    case .Chart:
        ChartView(sd: $sd)
    case .ByEye:
        ByEyeView(sd: $sd)
    case .List:
        ListView(sd: $sd)
    case .Camera:
        CameraView(sd: $sd)
    case .Settings:
        SettingsView(sd: $sd)
    }
}

// 给Page枚举添加前后切换方法
extension Page {
    func next() -> Page {
        switch self {
        case .EyeTest: return .Tone
        case .Tone: return .Chart
        case .Chart: return .ByEye
        case .ByEye: return .List
        case .List: return .Camera
        case .Camera: return .Settings
        case .Settings: return .Settings // 最后一页不再切换
        }
    }
    
    func previous() -> Page {
        switch self {
        case .EyeTest: return .EyeTest // 第一页不再切换
        case .Tone: return .EyeTest
        case .Chart: return .Tone
        case .ByEye: return .Chart
        case .List: return .ByEye
        case .Camera: return .List
        case .Settings: return .Camera
        }
    }
}

方案3：使用第三方Pager库 #

如果需要更灵活的页面控制，可以用成熟的第三方库（比如SwiftUIPager），它支持无限滚动、自定义过渡动画，对多页面场景的处理更稳定。

三、书籍类多页面场景的处理方式 #

书籍类场景（比如电子书阅读器）常用以下几种方案：

• 封装UIPageViewController：UIKit的UIPageViewController对翻页动画、页面缓存、手势处理的支持非常成熟，可通过UIViewRepresentable封装后在SwiftUI中使用，适合需要模拟真实翻页效果的场景。
• TabView+自定义过渡：如果不需要复杂的翻页动画，用TabView配合书本翻页样式的自定义过渡动画，实现成本更低。
• 专业阅读器库：使用专门的电子书库（比如ReaderKit），这类库支持PDF、EPUB等格式，自带成熟的翻页、书签、高亮等功能。

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