如何让自定义SwiftUI View支持外部修改背景与前景色？

问题分析 #

你当前的实现有几个核心问题导致配置不生效：

1. 错误使用@State：@State用于存储视图内部的可变状态，不适合外部传入的配置参数。外部调用方法修改@State变量时，无法触发SwiftUI的视图更新机制。
2. 链式方法未返回Self：SwiftUI的链式调用依赖每个方法返回修改后的View实例（值类型特性），你定义的foregroundColor和backgroundFill没有返回值，导致链式调用无法传递修改后的配置。
3. 不必要的UUID强制刷新：手动修改id来触发刷新是冗余操作，正确的属性变更会自动触发视图重建。

正确实现方式 #

方式1：Builder模式（自定义链式配置） #

通过值类型的拷贝返回新实例，实现和原生View一致的链式调用体验：

import SwiftUI

struct TestButton: View {
    let text: String
    // 用普通存储属性保存外部配置，默认值为原生风格
    private var foregroundColor: Color = .primary
    private var backgroundColor: Color = .white

    var body: some View {
        Text(text)
            .foregroundColor(foregroundColor)
            .padding()
            .background(backgroundColor)
            .cornerRadius(10)
    }

    // 自定义链式方法，返回修改后的Self实例
    func foregroundColor(_ color: Color) -> Self {
        var copy = self
        copy.foregroundColor = color
        return copy
    }

    func backgroundFill(_ color: Color) -> Self {
        var copy = self
        copy.backgroundColor = color
        return copy
    }
}

struct TestButton_Previews: PreviewProvider {
    static var previews: some View {
        TestButton(text: "Test")
            .foregroundColor(.red)
            .backgroundFill(.green)
    }
}

方式2：复用原生环境变量（更贴近原生体验） #

利用SwiftUI的@Environment读取原生modifier传递的配置，无需自定义foregroundColor方法，直接复用原生API：

import SwiftUI

struct TestButton: View {
    let text: String
    // 读取环境中的前景色，自动响应原生.foregroundColor()配置
    @Environment(\.foregroundColor) private var envForegroundColor
    private var backgroundColor: Color = .white

    var body: some View {
        Text(text)
            // 优先使用环境色， fallback到默认值
            .foregroundColor(envForegroundColor ?? .primary)
            .padding()
            .background(backgroundColor)
            .cornerRadius(10)
    }

    func backgroundFill(_ color: Color) -> Self {
        var copy = self
        copy.backgroundColor = color
        return copy
    }
}

struct TestButton_Previews: PreviewProvider {
    static var previews: some View {
        TestButton(text: "Test")
            .foregroundColor(.red) // 直接用原生modifier
            .backgroundFill(.green)
    }
}

关键要点 #

• 外部配置属性使用普通存储属性，而非@State/@Binding等状态属性
• 链式配置方法必须返回Self，遵循SwiftUI值类型的视图更新逻辑
• 复用环境变量可以让自定义View的API风格完全对齐原生View，降低使用者的学习成本

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