Skip to main content

6、自定义ViewModifier

SwiftUI为你提供了自定义modifiers的能力。 你可以使用自定义modifiers将多个modifiers合成一个。 本章我们将创建一个自定义modifier，他能够为TextView添加圆角和背景。

Getting ready​

新建一个SwiftUI工程UsingViewModifiers。

How to do it…​

  1. 修改ContentView中的text为Perfect。
Text("Perfect")
  1. 在ContentView.swift中，新建一个struct，遵循ViewModifier，接受一个参数Color。
struct BackgroundStyle: ViewModifier {
    var bgColor: Color
    func body(content: Content) -> some View{
        content
        .frame(width:UIScreen.main.bounds.width * 0.3)
        .foregroundColor(Color.black)
        .padding()
        .background(bgColor)
        .cornerRadius(CGFloat(20))
    }
}
  1. 为Text添加一个modifier。
Text("Perfect").modifier(BackgroundStyle(bgColor:.blue))
  1. 当然，如果你不想用modifier, 可以添加一个extension。
extension View {
    func backgroundStyle(color: Color) -> some View{
        self.modifier(BackgroundStyle(bgColor: color))
    }
}
  1. 将我们的modifier修改为刚刚的extension
Text("Perfect").backgroundStyle(color: Color.red)

image-20211223212239097

How it works…​

一个 ViewModifier通过修改原来修饰的View来创建一个新的View 。

通过通过遵循ViewModifier协议来创建一个自定义modifier。

通过.modifier()来应用我们自定义的modifier。

通过extension来添加更方便的Api。