SwiftUI如何实现全屏与分屏状态下展示不同UI，类似Vectornator效果

你需要实现的效果可以通过监听当前应用窗口的尺寸变化，对比设备屏幕尺寸判断展示模式，再切换对应UI即可实现，对应Vectornator的两种展示效果参考：

核心实现步骤 #

• 用GeometryReader获取当前应用窗口的实时尺寸
• 比对当前窗口尺寸和设备屏幕尺寸，判断是否为全屏模式
• 监听尺寸变化，实时切换不同的UI布局

完整代码示例 #

import SwiftUI

struct AdaptiveVectorEditorView: View {
    // 标记当前是否为全屏状态
    @State private var isFullScreenMode = false
    
    var body: some View {
        GeometryReader { proxy in
            Group {
                if isFullScreenMode {
                    // 替换为你的全屏UI布局
                    FullScreenEditorView()
                } else {
                    // 替换为你的分屏UI布局
                    SplitScreenEditorView()
                }
            }
            .onAppear {
                checkDisplayMode(currentSize: proxy.size)
            }
            .onChange(of: proxy.size) { newSize in
                checkDisplayMode(currentSize: newSize)
            }
        }
        // 如果你的布局需要撑满整个屏幕可以开启，否则可删除
        .ignoresSafeArea()
    }
    
    // 尺寸比对逻辑，判断当前是否为全屏
    private func checkDisplayMode(currentSize: CGSize) {
        guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene else {
            isFullScreenMode = false
            return
        }
        let fullScreenSize = windowScene.screen.bounds.size
        // 做浮点误差兼容，宽高都匹配则判定为全屏
        let widthEqual = abs(currentSize.width - fullScreenSize.width) < 1
        let heightEqual = abs(currentSize.height - fullScreenSize.height) < 1
        isFullScreenMode = widthEqual && heightEqual
    }
}

// 示例：全屏布局实现
struct FullScreenEditorView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("全屏编辑模式")
                .font(.largeTitle)
                .fontWeight(.bold)
            // 这里添加你的顶部工具栏、画布、侧边操作栏等全屏UI元素
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemBackground))
    }
}

// 示例：分屏布局实现
struct SplitScreenEditorView: View {
    var body: some View {
        HStack(spacing: 12) {
            Text("分屏精简模式")
                .font(.title2)
                .fontWeight(.semibold)
            // 这里添加适配分屏的精简工具栏、缩小版画布等分屏UI元素
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemBackground))
    }
}

适配说明 #

• 该方案原生兼容iPad的分屏、Slide Over悬浮窗两种非全屏模式，状态切换会实时响应
• 如果你不需要高精度的尺寸判断，也可以用尺寸类粗粒度适配：通过@Environment(\.horizontalSizeClass)判断，当水平尺寸类为regular时展示大屏布局，为compact时展示小屏布局，适合简单适配场景
• iPhone设备本身不支持分屏功能，该方案在iPhone上会始终触发全屏布局逻辑，无需额外适配

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