GeometryReader读取图片偏移量异常：滑动至第三张图时停止计算

问题描述 #

为TabView实现包含5张图片的轮播动态指示器时，使用GeometryReader获取第一张图片的minX位置计算offset。前两张图滑动时逻辑正常，但滑到第三张图后，minX不再被读取，offset停止更新。屏幕宽度为390，预期第三张图offset为780、第四张为1170，但实际到510就停止计数。

相关代码 #

struct topTabView: View {

private var numberOfImages = ["0", "1", "2", "3", "4"]

@State private var currentIndex = 0
@State var offset: CGFloat = 0

var body: some View {
    ScrollView(.init()){
        TabView(selection: $currentIndex) {
            ForEach(numberOfImages.indices, id: \.self) { index in
                
                if index == 0 {
                    Image("\(numberOfImages[index])")
                        .resizable()
                        .scaledToFill()
                        .overlay(
                            GeometryReader { proxy -> Color in
                                
                                let minX = proxy.frame(in: .global).minX
                                
                                DispatchQueue.main.async {
                                    withAnimation(.default) {
                                        self.offset = -minX
                                    }
                                }
                                
                                return Color.clear
                            }.frame(width: 0, height: 0)
                            
                            ,alignment: .leading
                            
                        )
                } else {
                    Image("\(numberOfImages[index])")
                        .resizable()
                        .scaledToFill()
                        .overlay(Color.black.opacity(0.2))
                }
            }//: ForEach
        } //: TabView
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
        .overlay(
            
            HStack(spacing:15) {
                
                ForEach(numberOfImages.indices, id: \.self) { index in
                    
                    Capsule()
                        .fill(Color.white)
                        .frame(width: getIndex() == index ? 20 : 7, height: 7)
                }
                
            }
    
            //Smooth Sliding effect...
                .overlay(
                    Capsule()
                        .fill(Color.white)
                        .frame(width: 20, height: 7)
                        .offset(x: getOffset())
                    , alignment: .leading
                )
                .padding(.bottom, UIApplication.shared.connectedScenes.flatMap { ($0 as? UIWindowScene)?.windows ?? [] }.first { $0.isKeyWindow }?.safeAreaInsets.bottom)
                .padding(.bottom, 10)
            
            , alignment: .bottom
        )
       
    } //: Scrollview
    .ignoresSafeArea()

} //: body

func getIndex() -> Int {
    
    print("DEBUG: Current offset is: \(offset)")
    print("DEBUG: Current getWidth is: \(getWidth())")

    let progress = round(offset / getWidth())
    let index = min(Int(progress), numberOfImages.count - 1)
    print("DEBUG: Current index is: \(index)")
    return index
}

func getOffset() -> CGFloat {
    // spacing = 15
    // Circle width = 7
    // So total = 22
    
    let progress = offset / getWidth()
    
    return 22 * progress
}}


extension View {
func getWidth() -> CGFloat {
    return UIScreen.main.bounds.width
}}

问题根源 #

仅在第一张图片上添加GeometryReader，滑动到第三张及以后页面时，第一张图片完全移出屏幕，SwiftUI会将其从视图层级销毁（或停止更新布局），导致GeometryReader无法继续触发minX计算，offset停止更新。

修复方案 #

给每一张图片都添加GeometryReader，同时结合当前页面索引计算真实偏移量：

修改ForEach中的图片视图部分，移除index == 0的条件，统一处理所有图片：

ForEach(numberOfImages.indices, id: \.self) { index in
    Image("\(numberOfImages[index])")
        .resizable()
        .scaledToFill()
        .overlay(
            GeometryReader { proxy -> Color in
                let minX = proxy.frame(in: .global).minX
                // 计算真实偏移量：当前页面的minX偏移 + 已滑过页面的宽度总和
                let actualOffset = -minX + CGFloat(index) * getWidth()
                
                DispatchQueue.main.async {
                    withAnimation(.default) {
                        self.offset = actualOffset
                    }
                }
                
                return Color.clear
            }.frame(width: 0, height: 0)
            , alignment: .leading
        )
        .overlay(Color.black.opacity(0.2))
}

额外优化建议 #

1. 移除外层ScrollView，TabView本身具备滚动能力，嵌套会导致手势冲突和布局异常。
2. 替换UIScreen.main.bounds.width的获取方式，用父视图的GeometryReader获取屏幕宽度，适配横屏等场景：

struct topTabView: View {
    private var numberOfImages = ["0", "1", "2", "3", "4"]
    
    @State private var currentIndex = 0
    @State var offset: CGFloat = 0
    @State private var screenWidth: CGFloat = 0
    
    var body: some View {
        GeometryReader { rootProxy in
            TabView(selection: $currentIndex) {
                // 上面修改后的图片视图代码
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            .overlay(/* 原有指示器代码 */)
            .ignoresSafeArea()
            .onAppear {
                screenWidth = rootProxy.size.width
            }
        }
    }
    
    func getWidth() -> CGFloat {
        screenWidth
    }
}

修改后，每张图片滑动时都会触发GeometryReader的布局更新，offset可正确计算所有页面的位置，动态指示器能正常跟随滑动。

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