有時候，我們會遇到類似這樣的需求，其中一種實現方式就是對alignmentGuide的靈活運用，如果您不太清楚剛剛這個名字的意思，我推薦您先看看我的這篇文章，算是alignmentGuide的基礎

博客地址：alignmentGuide基礎

寫在前面

代碼來自https://stackoom.com/question/3ytbp/帶包裝的SwiftUI-HStack

如侵權請聯系我刪除。

我添加了一些關鍵的打印語句和大量注釋來探索這份代碼。

正文

先貼出源碼，如果看著比較費勁可以跳過這部分，直接看我加了一些注釋的版本

import SwiftUI

struct TestWrappedLayout: View {
    @State var platforms = ["Ninetendo", "XBox", "PlayStation", "PlayStation 2", "PlayStation 3", "PlayStation 4"]

    var body: some View {
        GeometryReader { geometry in
            self.generateContent(in: geometry)
        }
    }

    private func generateContent(in g: GeometryProxy) -> some View {
        var width = CGFloat.zero
        var height = CGFloat.zero

        return ZStack(alignment: .topLeading) {
            ForEach(self.platforms, id: \.self) { platform in
                self.item(for: platform)
                    .padding([.horizontal, .vertical], 4)
                    .alignmentGuide(.leading, computeValue: { d in
                        if (abs(width - d.width) > g.size.width)
                        {
                            width = 0
                            height -= d.height
                        }
                        let result = width
                        if platform == self.platforms.last! {
                            width = 0 //last item
                        } else {
                            width -= d.width
                        }
                        return result
                    })
                    .alignmentGuide(.top, computeValue: {d in
                        let result = height
                        if platform == self.platforms.last! {
                            height = 0 // last item
                        }
                        return result
                    })
            }
        }
    }

    func item(for text: String) -> some View {
        Text(text)
            .padding(.all, 5)
            .font(.body)
            .background(Color.blue)
            .foregroundColor(Color.white)
            .cornerRadius(5)
    }
}

struct TestWrappedLayout_Previews: PreviewProvider {
    static var previews: some View {
        TestWrappedLayout()
    }
}

我們一起來閱讀這份源碼（加了注釋的版本）

import SwiftUI

struct TestWrappedLayout: View {
  //@State標明 當這個platforms發生變化的時候視圖進行自動的更新，這個不懂不影響我們閱讀代碼
    @State var platforms = ["Ninetendo", "XBox", "PlayStation", "PlayStation 2", "PlayStation 3", "PlayStation 4"]
  
//幾何閱讀器GeometryReader：捕獲了一個滿足GeometryProxy協議的變量，該協議提供安全區插圖和View的size（簡單點說就是這個東西能捕獲當前Container的一些參數，這個Container一般指的是HStack，VStack，ZStack等等）
    var body: some View {
        GeometryReader { geometry in
            self.generateContent(in: geometry)//將捕獲到的Container傳遞給generateContent函數返回一個View：這個函數在下面定義
        }

    }

    /// - Parameter g: 一個滿足GeometryProxy協議的變量：這個變量就是Container本身
    /// - Returns: 一個View
    private func generateContent(in g: GeometryProxy) -> some View {
        var width = CGFloat.zero//width初始值為0
        var height = CGFloat.zero//height初始值為0
        return ZStack(alignment: .topLeading) {//ZStack滿足.topLeadingalignment
 
            //實現思路：每個視圖寬度+本視圖的原定起點如果大于g的寬度則換行，否則按照原定起點進行放置
          //具體：對齊引導1: width = 0，height = 0，第一個View的左邊就緊挨著Container左邊框，然后width = width + View1的寬度；第二個View的左邊就向右偏移width個單位，然后width = width + View2；然后第三個。。。。。。以此類推可以得到一行內的全部正確約束
          //對齊引導2: height = 0， 在進行對齊引導1的時候如果某個View的寬度+原定偏移量超出了Container的寬度那么height = height + View的高度。。。。。。以此類推可以得到每行的約束
          //注意?：由于alignmentGuide中的代碼會被調用多次，所以當最后一個元素被成功約束之后需要將width，height清0以保證下一輪的約束正確
           //注意?：偏移量取負值，也就是computeValue的返回值取負值表示向右偏移，取負值表示向下偏移
            //
            ForEach(self.platforms, id: \.self) { platform in
                self.item(for: platform)/*item方法將一個個數據轉成一個個View*/
                    .padding([.horizontal, .vertical], 4)
                    .alignmentGuide(.leading, computeValue: { d in/*這里的d指的是每一個文本視圖（子視圖）*/
                        if (abs(width - d.width) > g.size.width)/*這里的g指的是Container視圖（父視圖）*/
                        {
                            width = 0
                            height -= d.height
                        }
                                                             //您可以取消這里的注釋來自己看看這些參數的值大概是多少，實體運行才能看到哦，右邊的預覽是看不到打印值的
//                        print("當前width",width)
//                        print("當前d.width",d.width)
//                        print("當前g.size.widht",g.size.width)
//                        print("\n")
                        let result = width
                        if platform == self.platforms.last! {
                            width = 0 //最后一個元素：由于Swift的‘=’是值傳遞，所以這里width被置為0，但最后一個元素的返回值依然是正常的而不是0
//                            print("正在約束的是",platform)
                        } else {
                            width -= d.width
                        }
                        print("正在約束的是",platform)
                        return result
                    })
                    .alignmentGuide(.top, computeValue: {d in
                        let result = height
                        if platform == self.platforms.last! {
                            height = 0 // last item
                        }
                        return result
                    })
            }
        }
    }

    func item(for text: String) -> some View {
        Text(text)
            .padding(.all, 5)
            .font(.body)
            .background(Color.blue)
            .foregroundColor(Color.white)
            .cornerRadius(5)
    }
}

struct TestWrappedLayout_Previews: PreviewProvider {
    static var previews: some View {
        TestWrappedLayout()
    }
}