SwiftUI TabView宽图正常滚动适配问题咨询

要避免宽幅图片在SwiftUI的TabView（page样式）内出现横向滚动，仅保留页面切换功能，可通过以下方式修改代码：

核心思路 #

• 限制图片的显示范围为屏幕边界，裁剪超出部分
• 确保每个Tab的内容不会超出屏幕尺寸，从而避免内部滚动

修改后的代码 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            a_View()
            b_View()
        }
        .ignoresSafeArea()
        .tabViewStyle(.page)
    }
}

struct a_View: View {
    var body: some View {
        GeometryReader { geometry in
            Image("Image1")
                .resizable()
                .scaledToFill()
                .frame(width: geometry.size.width, height: geometry.size.height)
                .clipped()
        }
        .ignoresSafeArea()
    }
}

struct b_View: View {
    var body: some View {
        GeometryReader { geometry in
            Image("Image2")
                .resizable()
                .scaledToFill()
                .frame(width: geometry.size.width, height: geometry.size.height)
                .clipped()
        }
        .ignoresSafeArea()
    }
}

代码说明 #

1. 使用GeometryReader获取当前视图的可用尺寸（即屏幕范围）
2. 将图片的frame设置为与视图尺寸完全一致，确保图片不会超出屏幕边界
3. 添加.clipped()裁剪图片超出frame的部分，同时通过scaledToFill保证图片比例不变
4. 调整后每个Tab的内容刚好填满屏幕，用户仅能通过左右滑动切换页面，无法滚动图片本身

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