SwiftUI中使用reduce为View添加多阴影的类型问题及替代方案

问题背景 #

想要给View编写一个扩展，通过传入阴影配置数组，用reduce函数批量应用多个阴影效果。初始代码如下：

extension View {
    func shadowEffects(_ shadowConfigs: [Double]) -> some View {
        shadowConfigs.reduce(self) { currentView, shadowConfig in
            currentView.shadow(
                color: .red,
                radius: shadowConfig
            )
        }
    }
}

但运行时触发错误：

Cannot convert value of type 'some View' to closure result type 'Self'

虽然用AnyView包装可以解决问题，但不想引入类型擦除，因为所有操作都针对同一类型视图：

extension View {
    func shadowEffects(_ shadowConfigs: [Double]) -> some View {
        shadowConfigs.reduce(AnyView(self)) { currentView, shadowConfig in
            AnyView(currentView.shadow(
                color: .red,
                radius: shadowConfig
            ))
        }
    }
}

以下是几种不需要AnyView的替代方案：

替代方案1：手动循环构建视图链 #

直接通过循环迭代阴影配置，逐步为视图添加阴影效果，完全避免类型擦除，保持类型安全：

extension View {
    func shadowEffects(_ shadowConfigs: [Double]) -> some View {
        var view = self
        for radius in shadowConfigs {
            view = view.shadow(color: .red, radius: radius) as! Self
        }
        return view
    }
}

这里的as! Self是安全的——因为每次调用shadow后返回的视图本质上是包裹了原视图的修改器容器，类型可以向上转换为原视图类型。

替代方案2：自定义多阴影ViewModifier #

创建自定义ViewModifier，在body中通过reduce批量应用阴影，更符合SwiftUI的设计模式，且可复用性更强：

struct MultiShadowModifier: ViewModifier {
    let shadowConfigs: [Double]
    let color: Color
    
    func body(content: Content) -> some View {
        shadowConfigs.reduce(content) { currentView, radius in
            currentView.shadow(color: color, radius: radius)
        }
    }
}

extension View {
    func shadowEffects(_ shadowConfigs: [Double], color: Color = .red) -> some View {
        modifier(MultiShadowModifier(shadowConfigs: shadowConfigs, color: color))
    }
}

该方案中，Modifier的body返回some View，编译器可以自动处理嵌套的视图类型，无需手动类型转换或擦除，还能轻松扩展阴影颜色、偏移量等参数。

替代方案3：利用ViewBuilder简化构建（SwiftUI 3.0+） #

如果使用SwiftUI 3及以上版本，可借助@ViewBuilder标记方法，让编译器自动处理视图类型推断，代码更简洁：

extension View {
    @ViewBuilder
    func shadowEffects(_ shadowConfigs: [Double]) -> some View {
        var view = self
        for radius in shadowConfigs {
            view = view.shadow(color: .red, radius: radius) as! Self
        }
        view
    }
}

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