实现主题切换功能

在 SwiftUI 中实现主题切换功能，你可以利用 EnvironmentValues 和 EnvironmentKey 的强大组合。 这种方法让你能够轻松地在整个应用中传递主题设置，确保 UI 元素保持一致的外观。 想象一下，你的用户可以一键切换深色或浅色模式，多么棒的体验！

定义主题结构

首先，你需要定义一个 Theme 结构体来封装所有主题相关的属性。 这包括颜色、字体和其他任何你希望主题化的视觉元素。

struct AppTheme {
    let backgroundColor: Color
    let textColor: Color
    let accentColor: Color
    // 更多主题属性...
}

extension AppTheme {
    static let light = AppTheme(backgroundColor: .white, textColor: .black, accentColor: .blue)
    static let dark = AppTheme(backgroundColor: .black, textColor: .white, accentColor: .orange)
}

你可以创建多个静态实例，比如 light 和 dark，来代表不同的主题预设。 这样，你的代码会更加整洁和易于管理。

创建自定义环境键

接下来，你需要创建一个自定义的 EnvironmentKey 来存储和访问你的 AppTheme。

private struct ThemeKey: EnvironmentKey {
    static let defaultValue: AppTheme = .light // 默认主题
}

extension EnvironmentValues {
    var appTheme: AppTheme {
        get { self[ThemeKey.self] }
        set { self[ThemeKey.self] = newValue }
    }
}

这个 ThemeKey 允许你通过 EnvironmentValues 访问 appTheme。 默认值设置为 light 主题，确保即使没有明确设置，应用也能有一个基础外观。

应用主题到视图

现在，你可以在你的视图中使用 appTheme 环境值来动态调整 UI。

struct ContentView: View {
    @Environment(\.appTheme) var theme

    var body: some View {
        VStack {
            Text("欢迎来到我的应用！")
                .foregroundColor(theme.textColor)
                .font(.largeTitle)
            Button("切换主题") {
                // 切换主题逻辑
            }
            .background(theme.accentColor)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(theme.backgroundColor)
        .edgesIgnoringSafeArea(.all)
    }
}

通过 @Environment(\.appTheme)，你可以轻松地在任何子视图中访问当前主题。 这种声明式的方式让主题管理变得异常简单。

切换主题逻辑

最后，你需要一个机制来实际切换主题。 你可以使用 @State 变量来存储当前的主题状态，并通过 environment(_:) 修饰符将其注入视图层级。

struct ThemeManagerView: View {
    @State private var currentTheme: AppTheme = .light

    var body: some View {
        ContentView()
            .environment(\.appTheme, currentTheme)
            .onTapGesture {
                currentTheme = (currentTheme.backgroundColor == .black) ? .light : .dark
            }
    }
}

• ThemeManagerView 负责管理 currentTheme 的状态。
• environment(\.appTheme, currentTheme) 将当前主题注入 ContentView 及其所有子视图。
• 点击手势用于演示主题切换，实际应用中你可以通过按钮或其他 UI 元素触发。

这种方法确保了主题的全局一致性，并且代码结构清晰，易于维护。 你的用户一定会喜欢这种个性化的体验！ 🚀