SwiftUI .page样式TabView：页面滚动时GeometryReader minX不更新

你的问题主要有两个核心原因：一是仅给第一个页面添加了GeometryReader，导致后续页面的位置变化无法被追踪；二是对全局坐标系下页面的minX值存在预期偏差，同时TabView的预加载机制也会影响视图的渲染时机。

修正后的代码 #

import SwiftUI

struct ContactScreenView: View {
    let text: String
    let tag: Int
    
    var body: some View {
        ZStack {
            Color.red.opacity(0.4).ignoresSafeArea()
            
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text(text)
            }
            .padding()
        }
        .background(
            GeometryReader { geometry in
                // 全局坐标系下的位置
                let globalMinX = geometry.frame(in: .global).minX
                // TabView内部自定义坐标系下的位置（符合你的预期）
                let tabRelativeMinX = geometry.frame(in: .named("TabViewSpace")).minX
                print("页面\(tag) - 全局minX: \(globalMinX), TabView相对minX: \(tabRelativeMinX)")
                return Color.clear
            }
        )
    }
}

struct DemoView: View {
    @State private var selectedTab: Int = 0
    private let screenWidth = UIScreen.main.bounds.width
    
    var body: some View {
        VStack {
            TabView(selection: $selectedTab) {
                ContactScreenView(text: "followers", tag: 0)
                    .tag(0)
                ContactScreenView(text: "following", tag: 1)
                    .tag(1)
                ContactScreenView(text: "blocked", tag: 2)
                    .tag(2)
                ContactScreenView(text: "Shared", tag: 3)
                    .tag(3)
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .coordinateSpace(name: "TabViewSpace") // 自定义坐标空间，用于计算相对位置
        }
    }
}

#Preview {
    DemoView()
}

关键修改说明 #

• 给所有页面添加GeometryReader：原代码仅第一个页面有位置追踪逻辑，现在每个ContactScreenView都添加了背景的GeometryReader，确保每个页面的位置变化都能被捕获。
• 自定义坐标空间：添加了名为TabViewSpace的自定义坐标空间，此时页面n的minX值会等于screenWidth * n，完全匹配你想要的预期。
• 区分两种坐标体系：全局坐标系中，当前显示的页面minX为0，左侧页面为负、右侧为正；自定义坐标空间下的位置更贴合你对页面索引对应位置的需求。

验证结果 #

运行修正后的代码，你会看到：

• 页面0：TabView相对minX = 0
• 页面1：TabView相对minX = screenWidth * 1
• 页面2：TabView相对minX = screenWidth * 2
• 页面3：TabView相对minX = screenWidth * 3

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