SwiftUI 简明教程之自定义 Modifier

本文为 Eul 样章，如果您喜欢，请移步 AppStore/Eul 查看更多内容。

Eul 是一款 SwiftUI & Combine 教程 App（iOS、macOS），以文章（文字、图片、代码）配合真机示例（Xcode 12+、iOS 14+，macOS 11+）的形式呈现给读者。笔者意在尽可能使用简洁明了的语言阐述 SwiftUI & Combine 相关的知识，使读者能快速掌握并在 iOS 开发中实践。

自定义 Modifier

SwiftUI 提供了许多内建的 Modifier（修饰器），我们可以方便地调用。但是系统提供的有一定的局限性，如果我们需要自定义 Modifier，该如何实现呢？

设想有如下需求场景：在某个用户的名字右边，如果他是 Vip，显示 Vip 标识，如果不是，显示开通会员的按钮。如果我们能自定义一个 isVip 这样的 Modifier 可以方便的调用和展示差异化视图，那该是极好的。

首先，我们要实现自定义的 Modifier，需要实现 ViewModifier 协议：

struct Vip: ViewModifier {
  let isVip: Bool

  func body(content: Content) -> some View {
    HStack {
      content
      if isVip {
        Text("Vip")
          .font(.caption).bold()
          .foregroundColor(.white)
          .padding(3)
          .background(Color.orange)
          .cornerRadius(3)
      } else {
        Button {
          // action
        } label: {
          Text("开通会员")
            .font(.caption)
            .foregroundColor(.white)
            .padding(5)
            .background(Color.blue)
            .clipShape(Capsule())
        }
        .buttonStyle(BorderlessButtonStyle())
      }
    }
  }
}

.buttonStyle(BorderlessButtonStyle()) 的作用是为了让按钮在列表中，只有按钮可以响应点击事件。

然后我们给 View 添加扩展：

extension View {
  func isVip(_ isVip: Bool) -> some View {
    self.modifier(Vip(isVip: isVip))
  }
}

接下来我们就可以方便的使用了：

Text("Bruce").isVip(false)
// 或
Text("Bruce").isVip(true)

本文为 Eul 样章，如果您喜欢，请移步 AppStore/Eul 查看更多内容。