SwifUI 自定义环境变量

我们以设置一个角标的背景色为为例

struct Badge: ViewModifier {

    @Environment(\.badgeColor) var badgeColor

    func body(content: Content) -> some View {
        content
            .font(.caption)
            .foregroundColor(.white)
            .padding(.horizontal, 5)
            .padding(.vertical, 2)
            .background(
                Capsule(style: .continuous)
                    .fill(badgeColor)
            )
    }
}

代码中的 badgeColor 就是自定义的环境变量

1.实现 EnvironmentKey 协议

enum BadgeColorKey: EnvironmentKey {
    static var defaultValue: Color = .blue
}

2.给自定义键添加 set 和 get 方法

extension EnvironmentValues {
    var badgeColor: Color {
        get {
            self[BadgeColorKey.self]
        }
        set {
            self[BadgeColorKey.self] = newValue
        }
    }
}

3.给 View 添加扩展

extension View {
    func badgeColor(_ color: Color) -> some View {
        environment(\.badgeColor, color)
    }
}

4.使用

VStack {
    Text(3000, format: .number)
        .modifier(Badge())

    Text("Test")
        .modifier(Badge())
}
.badgeColor(.cyan)

效果图