【SwiftUI】.frame()で簡単にSpacer()のネストを防ぐ方法

環境

• Swift5.5
• Xcode13.0
• iOS 15.0

右下にボタンを揃えたい時

よく見かける追加ボタンですが、あなたならどうやって実装しますか？

---

このようにVStack、HStackとSpacer()を組み合わせて実装しているかもしれません。

struct ContentView: View {
    var body: some View {
        VStack {
            Spacer()
            HStack {
                Spacer()
                PlusButton()
		/// 右下に揃えたいだけなのにネストが深くなる。。。
            }
        }
    }
}

VStack {}とHStack {}でネスト（Viewの階層）が深くなり、視認性が悪くなる場合があります。

.frame(maxWidth:maxHeight)を使う方法

公式ドキュメントはこちら

.frame(maxWidth: .infinity)で横に広がります。

.frame(maxHeight: .infinity)で上下に広がります。

alignmentにも引数を渡して、真ん中以外に揃えることができます。
.frame(maxWidth: .infinity, alignment: .leading)で左に揃えたり

---

先ほどのレイアウトを.frame()を使うとこうなります。

var body: some View {
    PlusButton()
        .frame(maxWidth: .infinity, //　左右いっぱいに広げる
	       maxHeight: .infinity, // 上下いっぱいに広げる
	       alignment: .bottomTrailing)　// 右下に揃える
}

ネストが深くならないため、コードがすっきりします。
ぜひ使ってみてください