【SwiftUI】SwiftUIのZStackとは？Spacerやpaddingとの違いを徹底解説！

SwiftUIのZStackとは？Spacerやpaddingとの違いを徹底解説！

SwiftUIでUIを組んでいるとよく登場する ZStack、Spacer、padding。
それぞれ見た目に「余白」や「重なり」が関係しているため、違いが分かりにくいという声も多いです。

この記事では、ZStackとSpacer/paddingの違いを初心者向けにわかりやすく解説します。

ZStackとは？

ZStackは、複数のViewを重ねて配置できるコンテナです。
上から順番にレイヤーのように重ねて表示されるのが特徴です。

ZStack {
    Image("背景画像")
    Text("タイトル")
}

この例では、「背景画像」の上に「タイトル」が重なるように表示されます。

• レイアウトを「重ねたい」ときに使う
• 中央揃えがデフォルト

Spacerとの違い

Spacerは、空白を作って要素の配置を調整するViewです。
ZStackのように「重ねる」ことはできませんが、「離す・詰める」には便利です。

HStack {
    Spacer()
    Text("右寄せ")
}

このように、Spacerは空間を埋めてViewを寄せる役割を果たします。
ZStackとはそもそも目的が異なります。

paddingとの違い

paddingは、Viewの内側に余白を追加するmodifierです。
ZStackのようにViewを重ねる機能はありません。

Text("余白あり")
    .padding()

この例では、文字の周囲に余白が追加されて、より見やすくなります。

ZStack・Spacer・paddingの比較表

使い分けのポイント

• UIを重ねたい → ZStack
• Viewの位置を調整したい → Spacer
• 見た目に余白を追加したい → padding

例えば、ZStack内にViewを置いたあと、.padding()で余白を追加する、といった併用もよくあります。

まとめ

ZStack・Spacer・paddingはすべてSwiftUIにおいてレイアウトを支える重要な要素です。

• ZStack：重ねるレイアウトに最適
• Spacer：空白の調整に便利
• padding：Viewの見た目を整える

違いを理解し、シーンに応じて使い分けることで、見た目も操作性も整ったUIが作れるようになります。
ぜひ実際に試してみてください！