🥑

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

1 min read

環境

  • Swift5.5
  • Xcode13.0
  • iOS 15.0

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

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


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

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) // 右下に揃える
}

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

Discussion

ログインするとコメントできます