SwiftUI 如何移除PageViewStyle样式TabView页面间的间距

你当前看到的页面间隙主要来自两个部分：一是你给每个Tab子页面设置了比TabView窄100pt的宽度，导致每个子页面自带左右各50pt的空白，滑动时两个页面的空白叠加形成大间距；二是PageTabViewStyle自带的默认页面间距，可按以下方案修改：

方案1：兼容iOS 17及以上（最简单） #

直接在PageTabViewStyle初始化时传入spacing: 0，同时调整子页面的结构，让子页面撑满TabView宽度，红色视图在内部居中即可：

struct ContentView: View {
    var body: some View {
        GeometryReader { reader in
            VStack(alignment: .center) {
                TabView {
                    ForEach(0..<7) { index in
                        // 子页面整体撑满TabView宽度
                        VStack {
                            // 内部红色视图保持你需要的宽度
                            VStack {
                                // 此处放你的页面内容
                            }
                            .frame(maxHeight: .infinity)
                            .frame(width: reader.size.width - 100)
                            .background(Color.red)
                            .cornerRadius(15)
                        }
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                    }
                }
                .background(Color.yellow)
                // 传入spacing: 0移除默认页面间距
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always, spacing: 0))
                .frame(width: reader.size.width, height: 500)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

方案2：兼容iOS 14~iOS 16 #

如果需要支持更低版本，调整页面结构后，可通过负padding抵消默认间距，也可搭配UIKit外观设置实现：

struct ContentView: View {
    var body: some View {
        GeometryReader { reader in
            VStack(alignment: .center) {
                TabView {
                    ForEach(0..<7) { index in
                        VStack {
                            VStack {
                                // 此处放你的页面内容
                            }
                            .frame(maxHeight: .infinity)
                            .frame(width: reader.size.width - 100)
                            .background(Color.red)
                            .cornerRadius(15)
                        }
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        // 抵消默认的8pt页面间距，可根据实际效果调整数值
                        .padding(.horizontal, -4)
                    }
                }
                .background(Color.yellow)
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
                .frame(width: reader.size.width, height: 500)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .onAppear {
                // 全局配置PageControl样式，可选
                UIPageControl.appearance().pageIndicatorTintColor = .systemGray4
                UIPageControl.appearance().currentPageIndicatorTintColor = .systemRed
            }
        }
    }
}

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