SwiftUI 元件對齊方式

SwiftUI預設元件就是置中顯示，如果要向左/向右/向上/向下對齊怎麼辦呢？

置中

預設置中顯示

    var body: some View {
        Text("Hello, World!")
            .background(Color.pink)
    }

向左對齊

向左對齊

HStack + Spacer()

包在一個HStack裡，並且用Spacer推到最左邊

 var body: some View {
        HStack {
            Text("Hello, World!")
                .background(Color.pink)
            Spacer()
        }

    }

調整frame的maxWidth&alignment

   var body: some View {
        Text("Hello, World!")
            .background(Color.pink)
            .frame(maxWidth: .infinity, alignment: .leading)

    }

為何不是將width設成.inifinity？

• width：確切指定視圖的寬度，並嘗試占據該寬度。當 width 設置為 .infinity 時，視圖將盡可能占據水平空間，但不會影響內容對齊方式。
• maxWidth：指定視圖的最大寬度，讓視圖可以在水平方向上彈性調整寬度，但不會超過父視圖的寬度。當 maxWidth 設置為 .infinity 時，視圖可以占據任意寬度，但不會超過父視圖的寬度。

在上述情況下，由於將 maxWidth 設置為 .infinity，Text 視圖可以在水平方向上占據任意寬度，同時由於對齊方式設置為 .leading，因此文本將向左對齊顯示。

相較之下，如果僅將 width 設置為 .infinity，視圖將嘗試占據尽可能多的水平空間，但不會影響內容的對齊方式。因此，在這種情況下，無法實現文本內容的左對齊。

向右對齊

向右對齊

同理反過來

HStack + Spacer()

HStack {
       Spacer()
       Text("Hello, World!")
         .background(Color.pink)
       }
}

調整frame的maxWidth&alignment

調成trailing

Text("Hello, World!")
     .background(Color.pink)
     .frame(maxWidth: .infinity, alignment: .trailing)

向上對齊

向上對齊

VStack + Spacer()

       VStack {
            Text("Hello, World!")
                .background(Color.pink)
            Spacer()

        }

調整frame的maxHeight和alignment

Text("Hello, World!")
   .background(Color.pink)
   .frame(maxHeight: .infinity, alignment: .top)

向下對齊

向下對齊

VStack + Spacer()

VStack {
      Spacer()
      Text("Hello, World!")
       .background(Color.pink)
}

調整frame的maxHeight和alignment

Text("Hello, World!")
            .background(Color.pink)
            .frame(maxHeight: .infinity, alignment: .bottom)

參考資料

我覺得用frame來改比較好，因為效果一樣，不用再多放V/HStack跟Spacer()兩個元件上去只為了排版
雖然用Spacer真的非常直覺，我還寫過一篇文章讚美他XD
沒意外的話這種需求以後我應該還是用frame做

祝大家快樂對齊😎