SwiftUI如何实现单视图内同显多标签的分页TabView效果

原生TabView配置.tabViewStyle(.page)时，默认每个分页页项会撑满TabView的全部可用宽度，且超出TabView边界的内容会被裁剪，才会出现同屏仅能显示1个标签的问题。以下两种方案都可以保留原生分页滑动的阻尼、回弹手感，同时实现同屏展示多标签、点击/滑动都能切换的效果：

方案1：基于原生TabView修改（兼容低版本iOS） #

这个方案不需要完全重构现有TabView逻辑，只需要调整子视图布局和系统滚动参数即可：

import SwiftUI

struct MultiTabPagingBar: View {
    @State private var days: [String] = []
    @State private var selectedIndex: Int = 0
    private let tabWidth: CGFloat = 100
    private let tabHeight: CGFloat = 50
    
    var body: some View {
        TabView(selection: $selectedIndex) {
            ForEach(Array(days.enumerated()), id: \.offset) { idx, title in
                Button(title) {
                    withAnimation(.spring()) {
                        selectedIndex = idx
                    }
                }
                .frame(width: tabWidth, height: tabHeight)
                .background(Color.gray.opacity(0.2))
                .cornerRadius(8)
                .tag(idx)
                // 给单页项加水平padding，把单页可视宽度收窄到标签本身尺寸
                .padding(.horizontal, (UIScreen.main.bounds.width - tabWidth) / 2)
            }
            
            Button("Add") {
                withAnimation(.spring()) {
                    days.append("tab")
                    selectedIndex = days.count - 1
                }
            }
            .frame(width: tabWidth, height: tabHeight)
            .background(Color.green.opacity(0.2))
            .cornerRadius(8)
            .tag(days.count)
            .padding(.horizontal, (UIScreen.main.bounds.width - tabWidth) / 2)
        }
        .tabViewStyle(.page(indexDisplayMode: .never)) // 隐藏系统默认分页圆点
        .frame(height: tabHeight)
        .clipsToBounds(false) // 允许边界外内容显示，露出相邻标签
        .onAppear {
            // 开启系统原生分页逻辑
            UIScrollView.appearance().isPagingEnabled = true
        }
    }
}

• 核心逻辑是给每个TabView子项加的水平padding刚好等于「屏幕半宽 - 单标签半宽」，保证选中标签始终停在屏幕正中
• 关闭裁剪后，左右相邻的标签会自然露出，实现参考效果的同屏多标签展示
• 点击标签直接修改选中索引，和滑动切换的状态完全同步，新增标签的动画也能正常生效

方案2：基于ScrollView原生分页实现（iOS17+，灵活度更高） #

如果不需要兼容iOS17以下版本，直接用系统ScrollView新增的分页对齐能力实现更稳妥，不需要修改全局UIAppearance参数，样式调整自由度更高：

import SwiftUI

struct CustomPagingTabBar: View {
    @State private var days: [String] = []
    @State private var selectedIndex: Int = 0
    private let tabWidth: CGFloat = 100
    private let tabHeight: CGFloat = 50
    private let tabSpacing: CGFloat = 12
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: tabSpacing) {
                ForEach(Array(days.enumerated()), id: \.offset) { idx, title in
                    Button(title) {
                        withAnimation(.spring()) {
                            selectedIndex = idx
                        }
                    }
                    .frame(width: tabWidth, height: tabHeight)
                    .background(selectedIndex == idx ? Color.blue.opacity(0.3) : Color.gray.opacity(0.15))
                    .cornerRadius(8)
                    .id(idx)
                }
                
                Button("Add") {
                    withAnimation(.spring()) {
                        days.append("tab")
                        selectedIndex = days.count - 1
                    }
                }
                .frame(width: tabWidth, height: tabHeight)
                .background(Color.green.opacity(0.2))
                .cornerRadius(8)
                .id(days.count)
            }
            .padding(.horizontal, (UIScreen.main.bounds.width - tabWidth) / 2)
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.viewAligned)
        .scrollPosition(id: $selectedIndex)
        .frame(height: tabHeight)
    }
}

• 这个方案完全不依赖TabView，通过scrollTargetBehavior(.viewAligned)实现和系统分页完全一致的滑动对齐手感
• 可以自由调整标签间距、选中态样式，甚至给非选中标签加缩放、透明度等视觉效果，不会影响App内其他滚动视图的行为
• 如果需要兼容iOS16及以下版本，只需要配合GeometryReader计算拖拽偏移量，手动实现分页对齐逻辑即可

两种方案都能满足滑动切换、点击切换、动态新增标签的需求，不会出现原实现同屏仅显示单个标签的问题。

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