【初心者向け🔰】SwiftUIのpaddingの使い方を説明してみた！

SwiftUIでアプリのレイアウトを作るとき、「文字やボタンのまわりに余白をつけたい」と思うことがあると思います。そんなときに使うのが、paddingです！

この記事では、paddingの基本から応用まで、初心者でもすぐに使える形でご紹介します！

paddingとは？

paddingは、ビューの内側と外側の間に余白（スペース）を追加する修飾子です。よく使うのは文字やボタン、画像などの周りにスペースを作るときです。

基本的なpaddingの使い方

Text("こんにちは")
    .padding()

このように書くと、四方（上下左右）すべてにデフォルトの青い余白が追加されます。

特定の方向にだけpaddingをつける

必要な方向にだけ余白をつけることもできます。

Text("上だけ余白")
   .padding(.top)

Text("左右に余白")
   .padding([.leading, .trailing])

例:

よく使う方向指定

指定	意味
.top	上
.bottom	下
.leading	左（言語によって変化）
.trailing	右（言語によって変化）

余白のサイズを指定する

デフォルトの余白ではなく、数値でピクセル指定もできます

Text("20ポイントの余白")
    .padding(20) // 四方向すべてに20ptの余白

Text("下にだけ30ptの余白")
    .padding(.bottom, 30)

例:

padding と Spacerの違い

padding → ビューの周りに余白を追加する

Spacer → ビュー同士の間を押し広げる

例えば...
padding の例：ビューの周囲に余白を追加

 Text("こんにちは")
                .padding() // 全方向にデフォルト余白
                .background(.blue)
            
            Text("これはpadding付き")
                .padding(.horizontal, 40) // 左右だけに40ptの余白
                .background(.blue)

例

Spacer の例：ビューの間を押し広げる

   Text("上のテキスト")

            Spacer() // ここが空間を押し広げる

            Text("下のテキスト")

例

まとめ

やりたいこと	コード例
全方向に余白	.padding()
特定方向に余白	.padding(.top)
複数方向に余白	.padding([.leading, .trailing])
サイズを指定	.padding(.bottom, 30)

paddingは基本中の基本なので、ぜひいろんな場面で試してみてください！
以上SwiftUIのpaddingの使い方を説明でした！ぜひ参考にしてみてください👍