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