本文為 Eul 樣章，如果您喜歡，請移步 AppStore/Eul 檢視更多內容。

Eul 是一款 SwiftUI & Combine 教程 App（iOS、macOS），以文章（文字、圖片、程式碼）配合真機示例（Xcode 12+、iOS 14+，macOS 11+）的形式呈現給讀者。筆者意在儘可能使用簡潔明瞭的語言闡述 SwiftUI & Combine 相關的知識，使讀者能快速掌握並在 iOS 開發中實踐。

重寫 alignmentGuide

SwiftUI 為我們提供了多種預設的對齊方式，如 .top，.bottom，.center 等。如下是將蘋果的 logo 和 文字 “Apple” 對齊的程式碼：

HStack(alignment: .bottom) {
  Image(systemName: "applelogo")
    .font(.largeTitle)
  Text("Apple")
}

如果我們想把文字 “Apple” 往上移動一些，換言之，文字的底部略高於於 logo 的底部。可以通過重寫 alignmentGuide 實現：

HStack(alignment: .bottom) {
  Image(systemName: "applelogo")
    .font(.largeTitle)
    .alignmentGuide(.bottom, computeValue: { d in d[.bottom] - 5})
  Text("Apple")
}
 

computeValue 閉包中返回的是一個 ViewDimensions 結構體例項，它有 height、width 屬性供我們使用，還可以通過下標獲取指定的對齊方式。

上例我們簡單演示了重寫 alignmentGuide 的方法。當然，對於這種簡單的情況，我們還可以使用 offset 實現：

HStack(alignment: .bottom) {
  Image(systemName: "applelogo")
    .font(.largeTitle)
    .offset(x: 0, y: 5)
  Text("Apple")
}

自定義 alignmentGuide

VStack {
  HStack {
    Text("手機")
    Text("155********")
  }
  
  HStack {
    Text("電子郵箱")
    Text("[email protected]")
  }
}
 

如上是一個常見的介面，通常我們會使手機和郵箱右對齊（或者第二列的文字左對齊），通過系統預設的對齊方式，是無法實現的，我們需要自定義 alignmentGuide：

extension HorizontalAlignment {
  struct CustomAlignment: AlignmentID {
    static func defaultValue(in context: ViewDimensions) -> CGFloat {
      return context[.trailing]
    }
  }
  
  static let custom = HorizontalAlignment(CustomAlignment.self)
}

通過實現 AlignmentID 協議的方法，我們指定自定義的對齊方式為尾部對齊，然後我們使用自定義的對齊方式：

VStack(alignment: .custom) {
  HStack {
    Text("手機")
      .alignmentGuide(.custom, computeValue: { $0[.trailing] })
    Text("155********")
      
  }
  
  HStack {
    Text("電子郵箱")
      .alignmentGuide(.custom, computeValue: { $0[.trailing] })
    Text("[email protected]")
  }
}

看看示例所示的效果，與我們的預期是一致的。

本文為 Eul 樣章，如果您喜歡，請移步 AppStore/Eul 檢視更多內容。