SwiftUI：根据内容适配条件显示视图

1. 基于屏幕尺寸直接判断（GeometryReader） #

利用GeometryReader获取当前容器（或屏幕）的尺寸，通过条件语句控制视图显隐，适合根据设备类别（小屏手机 vs 大屏/平板）做粗粒度适配。

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("核心内容")
                    .font(.title)
                
                // 仅在屏幕宽度大于375pt时显示额外视图
                if geometry.size.width > 375 {
                    Text("仅大屏显示的额外内容")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

2. 自定义视图修饰符（复用性更强） #

把屏幕尺寸判断逻辑封装成自定义修饰符，方便在任意视图上快速调用：

extension View {
    func visibleWhenScreenWidth(_ condition: @escaping (CGFloat) -> Bool) -> some View {
        self.modifier(ScreenWidthVisibilityModifier(condition: condition))
    }
}

private struct ScreenWidthVisibilityModifier: ViewModifier {
    let condition: (CGFloat) -> Bool
    
    func body(content: Content) -> some View {
        GeometryReader { geometry in
            condition(geometry.size.width) ? content : EmptyView()
        }
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        VStack {
            Text("核心内容")
            
            Text("小屏隐藏的辅助内容")
                .visibleWhenScreenWidth { $0 > 375 }
        }
    }
}

3. 根据内容自身尺寸判断（适配内容是否能容纳） #

如果需要判断内容本身是否能在当前屏幕尺寸下完整显示，而非单纯依赖屏幕尺寸，可以通过PreferenceKey获取内容的理想尺寸，再和屏幕尺寸对比：

// 定义PreferenceKey用于获取内容尺寸
struct ContentSizePreferenceKey: PreferenceKey {
    static var defaultValue: CGSize = .zero
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {}
}

extension View {
    func reportSize() -> some View {
        self.background(
            GeometryReader { geometry in
                Color.clear
                    .preference(key: ContentSizePreferenceKey.self, value: geometry.size)
            }
        )
    }
}

// 使用示例
struct ContentView: View {
    @State private var contentSize: CGSize = .zero
    @State private var screenSize: CGSize = .zero
    
    var body: some View {
        GeometryReader { screenGeo in
            VStack {
                Text("可能超长的内容：这是一段在小屏可能放不下的文本内容，需要判断是否能完整显示")
                    .reportSize()
                
                // 当内容宽度小于屏幕宽度时显示辅助视图
                if contentSize.width < screenSize.width {
                    Text("内容能完整显示时才出现的视图")
                }
            }
            .onPreferenceChange(ContentSizePreferenceKey.self) {
                contentSize = $0
            }
            .onAppear {
                screenSize = screenGeo.size
            }
        }
    }
}

额外提示 #

• 可以结合UIDevice.current.userInterfaceIdiom直接判断设备类型（比如pad vs phone），适合更粗粒度的适配场景。
• 对于动态字体，记得结合DynamicTypeSize做判断，确保适配不同字体大小的显示需求。

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