SwiftUIでアプリを作っていると、「文字や画像を指定のサイズにしたい」「端に寄せたい」といった場面がたくさん出てきます。
そんな時に使うのが frame と alignment！

この記事では、この2つの使い方を、初心者にも分かりやすく解説します! 🙌

frameとは？

ビューの幅や高さを指定するための修飾子です。

Text("Hello, SwiftUI!")
    .frame(width: 200, height: 400) //幅：200ポイント、高さ：400ポイントの枠を作る
    .background(.yellow)

例：

背景色をつけると、サイズ感が分かりやすい！

alignmentとは？

使い方の例（VStack, HStack, ZStackなどで使用）：

VStack(alignment: .leading) {
    Text("左寄せのテキスト")
}
.frame(width: 200)
.background(.blue)

Text("右下に表示")
    .frame(width: 200, height: 100, alignment: .bottomTrailing)
    .background(Color.gray.opacity(0.3))

例：

機能	目的	例
`frame`	幅・高さの枠を決める	`.frame(width: 200, height: 100)`
`alignment`	枠内やスタック内での位置を決める	`.frame(alignment: .topLeading)`

SwiftUIのframeとalignmentを理解すると、レイアウトの自由度が一気に広がります！
frameとAlignmentはよく使うのでぜひマスターしてください！✌️