如何让.tint()和.background()对自定义SwiftUI组件生效？

要实现类似原生组件的语法效果，需要通过环境变量传递.tint()设置的颜色，同时为背景环提供可配置的颜色选项，具体实现如下：

1. 支持.tint()修饰符 #

SwiftUI的.tint()修饰符会将颜色存入tint环境变量中，自定义组件只需读取这个环境值，就能替代原有的Color.accentColor（Color.accentColor读取的是旧版accentColor环境值，和.tint()不互通）。

2. 配置背景环颜色 #

原生的.background()是给整个视图添加背景层，而非修改组件内部的背景环颜色。我们可以通过自定义环境键实现类似的修饰符语法，或者直接给组件添加参数，两种方式任选：

完整实现代码 #

方式一：环境变量+自定义修饰符（贴近原生语法）

// 定义背景环颜色的环境键
private struct ProgressRingBackgroundKey: EnvironmentKey {
    static let defaultValue: Color = Color(.secondarySystemBackground)
}

extension EnvironmentValues {
    var progressRingBackground: Color {
        get { self[ProgressRingBackgroundKey.self] }
        set { self[ProgressRingBackgroundKey.self] = newValue }
    }
}

// 扩展View，添加自定义修饰符
extension View {
    func progressRingBackground(_ color: Color) -> some View {
        self.environment(\.progressRingBackground, color)
    }
}

// 自定义进度环组件
struct CustomProgressRing: View {
    let progress: Double
    // 读取.tint()设置的颜色
    @Environment(\.tint) var tintColor
    // 读取自定义背景环颜色
    @Environment(\.progressRingBackground) var backgroundRingColor
    
    public var body: some View {
        ZStack {
            Circle()
                .stroke(backgroundRingColor, lineWidth: 15)
            Circle()
                .trim(from: 0, to: CGFloat(min(progress, 1.0)))
                .stroke(tintColor, style: StrokeStyle(lineWidth: 15, lineCap: .round))
                .rotationEffect(.degrees(-90))
        }
    }
}

使用示例

CustomProgressRing(progress: 0.5)
    .tint(.red) // 进度条变为红色
    .progressRingBackground(.green) // 背景环变为绿色

方式二：组件参数配置（更简洁）

如果不需要修饰符语法，直接给组件添加参数即可：

struct CustomProgressRing: View {
    let progress: Double
    let tintColor: Color
    let backgroundRingColor: Color
    
    // 提供默认值，降低使用成本
    init(progress: Double,
         tintColor: Color = .accentColor,
         backgroundRingColor: Color = Color(.secondarySystemBackground)) {
        self.progress = progress
        self.tintColor = tintColor
        self.backgroundRingColor = backgroundRingColor
    }
    
    public var body: some View {
        ZStack {
            Circle()
                .stroke(backgroundRingColor, lineWidth: 15)
            Circle()
                .trim(from: 0, to: CGFloat(min(progress, 1.0)))
                .stroke(tintColor, style: StrokeStyle(lineWidth: 15, lineCap: .round))
                .rotationEffect(.degrees(-90))
        }
    }
}

使用示例

CustomProgressRing(progress: 0.5,
                   tintColor: .red,
                   backgroundRingColor: .green)

关键说明 #

• 不要混用Color.accentColor和.tint()：.tint()是SwiftUI 3.0+的推荐方案，通过环境变量传递颜色，和旧版accentColor体系不兼容。
• 原生.background()的作用：它是给整个视图添加背景层，若强行用它修改内部背景环颜色，会破坏原生语义，导致组件行为不符合用户预期，因此更推荐自定义修饰符或参数的方式。

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