SwiftUI自定义View如何实现外部可裁剪的背景设置？

问题根源 #

外部调用.background(Color.blue)时，背景是添加在自定义视图的外层容器上，而视图内部的clipShape只裁剪视图自身的内容，所以背景不会跟着被裁剪。要实现原生组件那样的效果，得让外部设置的背景能被视图内部捕获并应用到需要裁剪的层级上。

优雅解决方案：利用环境变量捕获背景样式 #

通过@Environment(\.backgroundStyle)读取外部设置的背景，把它应用到视图内部需要裁剪的容器上，这样背景就会被clipShape一起裁剪。

修改自定义视图代码

struct HomeScreenCounterView: View {
    @Environment(\.backgroundStyle) private var backgroundStyle
    let count: Int
    
    var body: some View {
        Text("\(count)")
            .font(.title)
            .padding()
            // 将外部设置的背景应用到内部层级
            .background(backgroundStyle)
            .clipShape(RoundedRectangle(cornerRadius: 8))
    }
}

外部调用方式（和原生组件完全一致）

HomeScreenCounterView(count: 5)
    .foregroundStyle(Color.red)
    .background(Color.blue) // 背景会被内部的圆角裁剪

补充说明 #

这个方案完全替代了初始化参数传背景色的方式，外部调用体验和原生SwiftUI组件一模一样，不需要额外传参，更符合SwiftUI的设计理念。

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