SwiftUI跨平台布局问题：正确获取Viewport尺寸并适配多设备

我需要为iPhone、iPad和Mac（Mac Catalyst）开发SwiftUI个人项目，要求在所有设备上实现统一布局：

• 顶部带按钮的导航栏
• 底部标签栏（TabBar）
• 中间的Viewport视图占据剩余全部屏幕空间

同时需要将Viewport的实时尺寸保存到全局ObservableObject（GlobalUI）中，但目前在不同设备上出现了布局异常：Viewport有时会占满整个屏幕，或者与顶部导航栏、底部标签栏重叠。以下是我两次尝试的实现代码：

第一次尝试代码 #

class GlobalUI: ObservableObject {
  @Published var viewportSize: CGSize = .zero // 存储可用视口尺寸
}

struct ContentView: View {
    @EnvironmentObject var globalUI: GlobalUI
    @State var selectedTab: TabSelection = .first

    var body: some View {
        GeometryReader { geometry in
            VStack(spacing: 0) {
                // 顶部栏
                CustomTopBar(selectedTab: selectedTab)
                    .ignoresSafeArea(edges: .top)
                
                // 主视口
                Viewport(selectedTab: selectedTab)
                    .frame(height: geometry.size.height - 100)
                
                // 底部标签栏
                CustomTabBar(selectedTab: $selectedTab)
                    .frame(height: 50)
                    .padding(.bottom, getSafeAreaBottomInset())
                    .background(Color("BrandGreen"))
                    .ignoresSafeArea(edges: .bottom)
            }
        }
        .background(Color.black)
        .edgesIgnoringSafeArea(.all)
    }
}

第二次尝试代码 #

struct ContentView: View {
    @EnvironmentObject var globalUI: GlobalUI
    @State var selectedTab: TabSelection = .first

    func getSafeAreaBottomInset() -> CGFloat {
        guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene else {
            return 0
        }
        return windowScene.windows.first?.safeAreaInsets.bottom ?? 0
    }

    var body: some View {
        VStack(spacing: 0) {
            CustomTopBar(selectedTab: selectedTab)
                .expandViewOutOfSafeArea(.top)
            
            GeometryReader { geometry in
                VStack(spacing: 0) {
                    Viewport(selectedTab: selectedTab)
                        .onAppear {
                            let newSize = geometry.size
                            if newSize.width > 0 && newSize.height > 0 {
                                globalUI.viewportSize = newSize
                                print("视口尺寸已更新: \(newSize)")
                            }
                        }
                        .onChange(of: geometry.size) { newSize in
                            if newSize.width > 0 && newSize.height > 0 {
                                globalUI.viewportSize = newSize
                                print("视口尺寸已更新: \(newSize)")
                            }
                        }
                        .frame(maxWidth: .infinity, maxHeight: geometry.size.height - getSafeAreaBottomInset() - 100)  // 调整高度以排除CustomTabBar高度

                    Spacer()
                }
            }
            
            CustomTabBar(selectedTab: $selectedTab)
                .frame(height: 50)
                .padding(.bottom, getSafeAreaBottomInset())
                .background(Color("BrandGreen")) // 确保纯色背景
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.black)
        .ignoresSafeArea(edges: [.horizontal, .bottom])
    }
}

问题根源与解决方案 #

两次尝试的核心问题是硬编码高度值（比如-100）和安全区处理逻辑不一致，导致跨设备布局适配失效。以下是修正后的实现方案，利用SwiftUI原生布局系统自动适配所有设备：

修正后的完整代码 #

class GlobalUI: ObservableObject {
    @Published var viewportSize: CGSize = .zero
}

// 自定义扩展，统一处理安全区溢出
extension View {
    func expandToSafeAreaEdge(_ edge: Edge) -> some View {
        self.ignoresSafeArea(edges: edge)
    }
}

struct ContentView: View {
    @EnvironmentObject var globalUI: GlobalUI
    @State var selectedTab: TabSelection = .first
    
    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            
            VStack(spacing: 0) {
                // 顶部导航栏：自动适配安全区顶部
                CustomTopBar(selectedTab: selectedTab)
                    .expandToSafeAreaEdge(.top)
                    .frame(height: 50) // 固定顶部栏高度（可根据需求调整）
                
                // 中间视口：自动占据剩余空间，实时同步尺寸
                GeometryReader { viewportGeo in
                    Viewport(selectedTab: selectedTab)
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .onAppear {
                            globalUI.viewportSize = viewportGeo.size
                        }
                        .onChange(of: viewportGeo.size) { newSize in
                            globalUI.viewportSize = newSize
                        }
                }
                
                // 底部标签栏：自动适配安全区底部
                CustomTabBar(selectedTab: $selectedTab)
                    .frame(height: 50)
                    .background(Color("BrandGreen"))
                    .expandToSafeAreaEdge(.bottom)
            }
        }
    }
}

关键优化点 #

1. 移除硬编码高度：利用VStack的自动布局特性，让中间视口自动填充顶部栏和底部栏之间的剩余空间，无需手动计算高度差。
2. 统一安全区处理：通过自定义扩展expandToSafeAreaEdge统一处理顶部/底部栏的安全区溢出，避免不同设备上的安全区逻辑混乱。
3. 准确获取视口尺寸：将GeometryReader直接包裹在Viewport外层，确保获取到的是视口的实际可用尺寸，不会包含顶部/底部栏的空间。
4. 跨设备适配：Mac Catalyst下安全区逻辑与iOS一致，此方案无需额外修改即可适配Mac平台。
5. 简化状态更新：去掉冗余的尺寸判断（newSize.width > 0），GeometryReader返回的尺寸在布局完成后必然是有效数值。

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