SwiftUI中如何合并环境变量实现布局判断逻辑复用

把判断逻辑统一封装后注入SwiftUI环境，同时配套便捷布局容器，既能直接拿到布尔值做样式微调，也能快速切换整块布局，完全不需要在每个视图重复写环境变量读取和判断代码。

第一步：自定义环境键封装判断规则 #

首先扩展EnvironmentValues，将紧凑布局的判断逻辑封装为可全局读取的环境值：

import SwiftUI

private struct IsHorCompactLayoutKey: EnvironmentKey {
    static let defaultValue: Bool = false
}

extension EnvironmentValues {
    var isHorCompactLayout: Bool {
        get { self[IsHorCompactLayoutKey.self] }
        set { self[IsHorCompactLayoutKey.self] = newValue }
    }
}

第二步：编写统一注入修饰符 #

实现一个ViewModifier，自动读取系统原生的horizontalSizeClass和sizeCategory，按你原有的规则计算结果后注入子视图环境，只需要在App根层级添加一次，所有子视图都能直接读取计算结果：

struct CompactLayoutAdaptionModifier: ViewModifier {
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    @Environment(\.sizeCategory) private var sizeCategory
    
    func body(content: Content) -> some View {
        let isCompact = horizontalSizeClass == .compact || sizeCategory.isAccessibilityCategory
        content
            .environment(\.isHorCompactLayout, isCompact)
    }
}

extension View {
    /// 启用水平紧凑布局自适应，加在App根视图即可全局生效
    func enableCompactLayoutAdaption() -> some View {
        modifier(CompactLayoutAdaptionModifier())
    }
}

第三步：全局配置生效 #

在App入口的根视图上添加修饰符，一次配置全App复用逻辑：

@main
struct YourApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .enableCompactLayoutAdaption()
        }
    }
}

两种使用场景 #

1. 直接读取布尔值做细节调整 #

需要调整内边距、字号、间距这类局部样式时，直接从环境读取isHorCompactLayout即可，不需要重复写判断逻辑：

struct DemoView: View {
    @Environment(\.isHorCompactLayout) private var isHorCompactLayout
    
    var body: some View {
        Text("示例内容")
            .padding(isHorCompactLayout ? 12 : 24)
    }
}

2. 用自适应容器直接切换整块布局 #

如果是整块布局结构切换，可以封装一个便捷容器视图，省去手写if/else的重复代码：

struct AdaptiveHorLayout<CompactContent: View, RegularContent: View>: View {
    @Environment(\.isHorCompactLayout) private var isHorCompactLayout
    private let compactContent: () -> CompactContent
    private let regularContent: () -> RegularContent
    
    init(
        @ViewBuilder compact: @escaping () -> CompactContent,
        @ViewBuilder regular: @escaping () -> RegularContent
    ) {
        self.compactContent = compact
        self.regularContent = regular
    }
    
    var body: some View {
        if isHorCompactLayout {
            compactContent()
        } else {
            regularContent()
        }
    }
}

使用时直接传入两种布局的内容即可：

struct HomePage: View {
    var body: some View {
        AdaptiveHorLayout {
            // 紧凑布局内容
            VStack {
                Text("CompactLayout()")
            }
        } regular: {
            // 常规宽布局内容
            HStack {
                Text("NormalLayout()")
            }
        }
    }
}

该实现完全复用你原有的判断规则，后续如果要调整紧凑布局的判定逻辑（比如新增横屏判断、平板特殊适配规则），只需要修改CompactLayoutAdaptionModifier中的计算代码，全App所有用到该判断的位置会自动同步更新，不会出现逻辑不一致的问题。

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