SwiftUI中如何根据系统背景色自动适配卡片背景色？

你的问题很常见——手动传递状态来适配不同背景确实繁琐，我们可以利用SwiftUI的环境变量系统来实现自动化，让卡片自动感知所在的背景环境并调整颜色。

下面是具体的实现步骤：

1. 定义背景风格枚举与环境键 #

首先，我们创建一个枚举来标记当前视图的背景类型，再通过自定义环境键让这个状态在视图层级中传递：

// 标记当前视图的背景风格
enum BackgroundStyle {
    case primary   // 对应 systemBackground
    case tertiary  // 对应 tertiarySystemBackground
}

// 自定义环境键，用于传递背景风格
struct BackgroundStyleKey: EnvironmentKey {
    static let defaultValue: BackgroundStyle = .primary
}

extension EnvironmentValues {
    var backgroundStyle: BackgroundStyle {
        get { self[BackgroundStyleKey.self] }
        set { self[BackgroundStyleKey.self] = newValue }
    }
}

2. 在对应视图中设置环境值 #

在使用tertiarySystemBackground的模态视图中，我们给整个视图设置对应的环境值：

struct ModalView: View {
    var body: some View {
        ZStack {
            Color.tertiarySystemBackground.edgesIgnoringSafeArea(.all)
            Card() // 卡片无需手动传参
        }
        .environment(\.backgroundStyle, .tertiary) // 标记当前背景风格
    }
}

而使用systemBackground的普通视图不需要额外设置，因为环境键的默认值就是.primary。

3. 让卡片自动读取环境值并适配颜色 #

修改你的Card视图，通过@Environment读取背景风格和配色方案，自动计算合适的背景色：

struct Card: View {
    @Environment(\.backgroundStyle) private var backgroundStyle
    @Environment(\.colorScheme) private var colorScheme
    
    // 根据环境自动计算卡片背景色
    private var adaptiveBackgroundColor: Color {
        // 仅在深色模式+三级背景时切换为systemGray5
        if colorScheme == .dark && backgroundStyle == .tertiary {
            return Color.systemGray5
        } else {
            return Color.systemGray6
        }
    }
    
    var body: some View {
        // 你的卡片内容示例
        VStack {
            Text("Card Title")
                .font(.headline)
            Text("Card Content")
                .font(.body)
                .foregroundColor(.secondary)
        }
        .padding()
        .background(adaptiveBackgroundColor)
        .cornerRadius(12)
    }
}

额外优化 #

如果你的项目中有大量使用tertiarySystemBackground的模态视图，可以创建一个模态视图的基类，统一设置backgroundStyle环境值，避免重复代码：

struct TertiaryBackgroundModalView<Content: View>: View {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        ZStack {
            Color.tertiarySystemBackground.edgesIgnoringSafeArea(.all)
            content
        }
        .environment(\.backgroundStyle, .tertiary)
    }
}

// 使用方式
struct ExampleModal: View {
    var body: some View {
        TertiaryBackgroundModalView {
            Card()
            // 其他视图内容
        }
    }
}

这种方式的优势在于：

• 完全自动化，无需手动给卡片传递任何参数
• 可扩展性强，如果后续需要适配更多背景类型，只需扩展BackgroundStyle枚举即可
• 代码更清晰，背景风格的逻辑集中在环境传递和卡片的适配计算中

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