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)
主なalignmentの種類：
| 使い方 | 意味 |
|---|---|
.leading |
左寄せ（横） |
.trailing |
右寄せ（横） |
.center（デフォルト） |
中央寄せ |
.top / .bottom
|
上下の寄せ（主にZStackやVStackで使用） |
frame + alignment の組み合わせ
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はよく使うのでぜひマスターしてください！✌️