• SwiftUI 提供了視圖不同邊緣的對齊指南（.leading、trailing、top 等）以及 .center 和兩個基線選項來幫助文本對齊。然而，當處理在不同視圖之間分割的視圖時，如果必須使在用戶界面完全不同的兩個視圖部分對齊，這些方法都不能很好地很好解決問題。
• 為了解決類似的問題，SwiftUI 允許創建自定義的對齊輔助線，并在整個 UI 的視圖中使用這些輔助線，在這些視圖之前或之后發生什么并不重要，但它們仍然會排成一條線。
• 例如，下面的布局在左側顯示我的 CSDN 帳戶名和我的個人資料頭像，右側顯示 “CSDN ID：” 加上 “Forever_wj” 的大號字體：

struct ContentView: View {var body: some View {HStack {VStack {Text("@CSDN")Image("forever_wj").resizable().frame(width: 60, height: 60)}VStack {Text("CSDN ID:")Text("Forever_wj").font(.title)}}} }

• 效果如下：

• 如果想讓 “@CSDN” 和 “Forever_wj” 垂直對齊，那么現在就很難了。水平堆棧內部包含兩個垂直堆棧，因此沒有內置的方法來獲得所需的對齊方式，像 HStack(alignment: .top) 這樣的方便的方式。要解決這個問題，我們需要定義一個自定義布局指南，這應該是 VerticalAlignment 或 HorizontalAlignment 的擴展，并且是符合 AlignmentID 協議的自定義類型。
• 當說到“自定義類型”時，你可能會想到一個結構體，但實際上，我認為將其作為枚舉來實現是一個更好的主意。AlignmentID 協議只有一個要求，即一致性類型必須提供一個靜態 defaultValue(in:) 方法，該方法接受 ViewDimensions 對象并返回一個 CGFloat，指定“如果視圖沒有 alignmentGuide() 修飾符，該視圖應該如何對齊“，將獲得視圖的現有 ViewDimensions 對象，因此可以選擇其中一個作為默認值，也可以使用硬編碼值。
• 具體實現如下所示：

extension VerticalAlignment {struct MidAccountAndName: AlignmentID {static func defaultValue(in d: ViewDimensions) -> CGFloat {d[.top]}}static let midAccountAndName = VerticalAlignment(MidAccountAndName.self) }

• 可以看到，在默認情況下使用了 .top 視圖維度，并且還創建了一個名為 midAccountAndName 的靜態常量，以使自定義對齊更易于使用。
• 現在來分析一下為什么使用枚舉比使用結構體更可取，原因如下：
• • 剛剛創建了一個名為 MidAccountAndName 的新結構體，這意味著可以（如果需要的話）創建該結構體的實例，即使這樣做沒有任何意義，因為它沒有任何功能；
• • 如果將 struct MidAccountAndName 替換為 enum MidAccountAndName，那么就不能再創建它的一個實例了，它的存在只是為了容納一些功能。
• 無論選擇的是枚舉還是結構體，其用法都保持不變：將其設置為堆棧的對齊方式，然后使用 alignmentGuide() 在要對齊的任何視圖上激活它。這只是一個指南：它幫助我們沿一條直線對齊視圖，但沒有說明如何對齊視圖，這意味著仍然需要為 alignmentGuide() 提供閉包，該閉包可以根據需要定位視圖。
• 例如，可以將 CSDN 代碼更新為 use.midAccountAndName，然后告訴帳戶和名稱使用其中心位置作為指南，明確地說，這意味著“對齊這兩個視圖，使它們的中心都位于 .midAccountAndName 指南上”：

struct ContentView: View {var body: some View {HStack(alignment: .midAccountAndName) {VStack {Text("@CSDN").alignmentGuide(.midAccountAndName) { d in d[VerticalAlignment.center] }Image("forever_wj").resizable().frame(width: 60, height: 60)}VStack {Text("CSDN ID:")Text("Forever_wj").alignmentGuide(.midAccountAndName) { d in d[VerticalAlignment.center] }.font(.title)}}} }

• 那么效果就變成如下這樣：

• 這將確保它們是垂直對齊的，不管前面或后面是什么，只要有了這個示例，那么在前后添加更多的文本視圖，SwiftUI 將重新定位所有內容，以確保對齊的兩個視圖保持不變。

總結

以上是生活随笔為你收集整理的SwiftUI之深入解析布局如何自定义AlignmentGuides的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。