[SwiftUI 知识碎片] Debris-15 自定义 modifierSwiftUI 提供了一些内建的 modifi

译自 Custom modifiers
更多内容欢迎关注公众号「Swift花园」

SwiftUI 提供了一些内建的 modifiers ，比如font()，background()，和clipShape()。不过，我们也可以创建自定义 modifier 来做一些特别的事情。

举个例子，我们可以让我们的 app 中的所有标题拥有一个特别的样式，首先我们创建一个自定义的 ViewModifier 结构体来实现我们想做的事情：

struct Title: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.largeTitle)
            .foregroundColor(.white)
            .padding()
            .background(Color.blue)
            .clipShape(RoundedRectangle(cornerRadius: 10))
    }
}

现在我们可以通过 modifier() 方法来使用这个 modifier —— 是的，这是一个叫 “modifier” 的 modifier ，但它可以让我们应用任意类型的 modifier 到一个视图，像下面这样：

Text("Hello World")
    .modifier(Title())

使用自定义 modifier 的时候，基于 View 创建扩展是个好主意。例如，我们可以把 Titlemodifier 封装成扩展的形式，像下面这样：

extension View {
    func titleStyle() -> some View {
        self.modifier(Title())
    }
}

然后这样使用：

Text("Hello World")
    .titleStyle()

自定义 modifiers 不仅可以应用已经存在的其他 modifier —— 他们也可以根据需要创建新的视图结构。记住，modifiers 是返回新的对象，而不是修改已经存在的对象，因此我们可以把视图嵌到一个栈里，并且添加其他视图：

struct Watermark: ViewModifier {
    var text: String

    func body(content: Content) -> some View {
        ZStack(alignment: .bottomTrailing) {
            content
            Text(text)
                .font(.caption)
                .foregroundColor(.white)
                .padding(5)
                .background(Color.black)
        }
    }
}

extension View {
    func watermarked(with text: String) -> some View {
        self.modifier(Watermark(text: text))
    }
}

上面的代码就位后，我们就可以像下面这样给任何视图添加水印了：

Color.blue
    .frame(width: 300, height: 200)
    .watermarked(with: "Hacking with Swift")

我的公众号这里有Swift及计算机编程的相关文章，以及优秀国外文章翻译，欢迎关注～