[SwiftUI]ZStackの中央寄せの挙動

ZStack の挙動について簡単に調べてみました。

やりたかったこと

指定の領域内の中心に、画像などの固定サイズのものを中央寄せで表示する時、初めはHStackとVStackとSpacerを使い、中央寄せできることを考えました。

VStack {
  Spacer()
  HStack {
    Spacer()
    Color.gray.frame(width: 100, height: 100)
    Spacer()
  }.frame(width: 320)
  Spacer()
}.frame(height: 480)

これでも中央寄せができましたが、レイアウトが複雑です。
もっと簡単な方法がないかと思い、ZStackで中央寄せできないか調べました。

ZStackで中央寄せ

ZStackを使う方法だと、意外と簡単でした。

ZStack {
  Color.gray.frame(width: 100, height: 100)
}
.frame(width: 320, height: 300)

このコードで、以下のようになりました。

---

---

ZStackのalignment

ZStackでは、引数としてalignmentを指定できましたが、思っていたものと違いました。

ZStack(alignment: .leading) {
  Color.gray.frame(width: 100, height: 100)
}
.frame(width: 320, height: 300)

とすれば、左寄せになるかと思ったのですが、そうではありませんでした。

このalignmentがどのように効いてくるかと調べたところ、以下の挙動になっていました。

ZStack(alignment: .top) {
  Color.gray.frame(width: 100, height: 100)
  Color.black.frame(width: 100, height: 10)            
}
.frame(width: 320, height: 300)

このように、指定すると、

---

---

２つの要素がtopで揃った上で、ZStackの中央寄せになっていました。

参考

https://developer.apple.com/documentation/swiftui/zstack
https://qiita.com/shiz/items/0c41d20a2cb7b0748875
https://note.com/marikooota/n/n3d0054fa0c87