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 查看更多内容。

iOS 开发,独立作品: ① Eul:SwiftUI & Combine 简明教程 ② FontsX:在任意 app 输入特殊字体 详情请戳: https://apps.apple.com/cn/developer/ke-zeng/id1322330151
posted @ 2021-05-14 21:54  Bruce2077  阅读(147)  评论(0编辑  收藏  举报