SwiftUI中TabView内图片iPad横屏时被裁剪的问题求助

问题根源 #

你通过给TabView和内部子视图分别旋转90°、270°来模拟垂直滚动，这种绕开原生垂直TabView的做法会打乱布局系统的尺寸计算逻辑，在iPad横屏的宽屏环境下，图片的可用空间被错误压缩，最终导致两侧裁剪。

解决方案 #

方案1：使用原生垂直PageTabViewStyle（推荐，iOS 16+） #

iOS 16及以上版本的PageTabViewStyle支持直接设置垂直方向，从根源避免布局适配问题：

TabView {
    ForEach(courses, id: \.self) { course in
        NavigationLink {
            iPadInfoView(event: course)
        } label: {
            ZStack {
                Image("event_img")
                    .resizable()
                    .padding([.leading, .trailing])
                    .scaledToFit()
                VStack {
                    Text(course.title)
                        .foregroundColor(.white)
                        .fontWeight(.heavy)
                        .font(.system(size: 28))
                    Text(course.location ?? "No Location")
                        .foregroundColor(.white)
                        .padding([.top])
                    Text(course.startDate, style: .time)
                        .foregroundColor(.white)
                        .italic()
                }
            }
        }
    }
}
.tabViewStyle(.page(indexDisplayMode: .never, orientation: .vertical)) // 直接设置垂直滚动方向
.navigationTitle("Today")

方案2：兼容旧版本的调整（iOS <16） #

如果需要支持iOS 15及以下，需给旋转后的视图添加明确的尺寸约束，确保图片能获取正确的可用空间：

TabView {
    ForEach(courses, id: \.self) { course in
        NavigationLink {
            iPadInfoView(event: course)
        } label: {
            ZStack {
                Image("event_img")
                    .resizable()
                    .padding([.leading, .trailing])
                    .scaledToFit()
                VStack {
                    Text(course.title)
                        .foregroundColor(.white)
                        .fontWeight(.heavy)
                        .font(.system(size: 28))
                    Text(course.location ?? "No Location")
                        .foregroundColor(.white)
                        .padding([.top])
                    Text(course.startDate, style: .time)
                        .foregroundColor(.white)
                        .italic()
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity) // 让子视图占满可用空间
            .rotationEffect(.degrees(270))
        }
    }
}
.tabViewStyle(.page(indexDisplayMode: .never))
.rotationEffect(.degrees(90))
.frame(maxWidth: .infinity, maxHeight: .infinity) // 确保TabView占满父容器
.navigationTitle("Today")

临时应急方案：给Image添加clipped(false)，允许内容超出容器显示，但这只是治标不治本：

Image("event_img")
    .resizable()
    .padding([.leading, .trailing])
    .scaledToFit()
    .clipped(false)

补充说明 #

旋转实现垂直滚动本质是布局hack，在不同设备尺寸尤其是iPad横屏这种特殊宽高比场景下极易出现适配问题，优先使用原生支持的垂直TabView是最稳妥的选择。

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