SwiftUI垂直TabView右侧出现奇怪边距的问题求助

核心问题分析 #

你遇到的边距问题，本质是旋转后的布局尺寸与屏幕实际尺寸不匹配，加上ignoresSafeArea的作用层级不对，导致视图无法完全填充屏幕。

具体修改方案 #

调整代码的布局层级、旋转逻辑和安全区域忽略的位置，以下是修正后的代码：

@State private var selectedTabIndex = 0

var body: some View {
    GeometryReader { proxy in
        TabView(selection: $selectedTabIndex) {
            ForEach(0..<10) { index in
                Text("test \(index)")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.yellow)
                    // 内部视图旋转回来，匹配垂直滚动后的显示方向
                    .rotationEffect(.degrees(90))
            }
            // 设置TabView内部页面尺寸为屏幕高度（旋转后将成为滚动方向的宽度）
            .frame(width: proxy.size.height, height: proxy.size.width)
        }
        // 将TabView整体旋转90度，实现垂直滚动效果
        .rotationEffect(.degrees(-90))
        // 设置旋转后的TabView尺寸为屏幕实际尺寸
        .frame(width: proxy.size.width, height: proxy.size.height)
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    }
    // 让GeometryReader忽略安全区域，获取全屏尺寸
    .ignoresSafeArea()
    // 隐藏导航栏相关设置
    .navigationBarTitle("")
    .navigationBarHidden(true)
    .navigationBarBackButtonHidden(true)
}

关键调整点说明 #

• 调整ignoresSafeArea作用对象：把ignoresSafeArea移到GeometryReader上，确保它能获取到屏幕的全屏尺寸，避免外层容器受安全区域限制导致尺寸计算偏差。
• 简化旋转逻辑：让内部页面和TabView的旋转方向相反，省去复杂的锚点和偏移计算，同时保证每个页面的尺寸匹配旋转后的布局要求。
• 移除冗余层级：去掉多余的ZStack，直接用GeometryReader作为根视图，减少布局层级带来的干扰。

额外优化建议 #

如果需要适配横竖屏切换，可以在GeometryReader中监听尺寸变化，或添加onRotate修饰符动态调整布局，上述代码已能解决固定竖屏场景下的边距问题。

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