SwiftUI如何在自定义View扩展方法中批量应用多个修饰符

你遇到的编译错误本质是SwiftUI的修饰符特性导致的：SwiftUI中每一个View修饰符调用都会返回一个和原View类型完全不同的新结构体实例。你最初的写法中初始变量view的类型是当前原始View的具体类型Self，后续调用border(edge:)返回的是不透明类型some View，二者类型不匹配自然无法赋值。同时View是带关联类型的协议，不能直接作为变量的类型声明，所以var view: View = self也无法编译。

有两种常用的实现方式可以解决这个问题：

方案1：使用AnyView做类型擦除 #

把每一步修饰符返回的View都包装成AnyView，统一变量类型，这种写法直观易懂，兼容性极强，微小的性能损耗在绝大多数场景下可以忽略：

extension SwiftUI.View {
    public func border(edge: Edge, color: SwiftUI.Color, width: CGFloat = 1, cornerRadius: CGFloat = 0) -> some SwiftUI.View {
        // 保留你的原有实现即可
        self
    }

    public func border(edges: [Edge], color: SwiftUI.Color, width: CGFloat = 1, cornerRadius: CGFloat = 0) -> some View {
        var view: AnyView = AnyView(self)
        edges.forEach { edge in
            view = AnyView(view.border(edge: edge, color: color, width: width, cornerRadius: cornerRadius))
        }
        return view
    }
}

方案2：使用reduce结合@ViewBuilder（推荐） #

如果你想避免类型擦除带来的额外开销，可以用@ViewBuilder配合集合的reduce方法来叠加修饰符，不需要做类型转换，性能更优：

extension SwiftUI.View {
    @ViewBuilder
    public func border(edges: [Edge], color: SwiftUI.Color, width: CGFloat = 1, cornerRadius: CGFloat = 0) -> some View {
        edges.reduce(self) { partialResult, edge in
            partialResult.border(edge: edge, color: color, width: width, cornerRadius: cornerRadius)
        }
    }
}

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