CSSでも余白のために使うpadding、SwiftUIでも同じような機能なのか調べてみよう！
padding（インスタンス メソッド）
よく利用するpadding()は、指定したビューの各端に特定のパディング量を追加するメソッドです。日本語訳だと、芯、詰め物など。余白というイメージですね。
func padding(_ length: CGFloat) -> some ViewCGはAppleの描画系フレームワーク（Core Graphics）の略
パラメータのlengthは、全てのエッジ（上下左右）に埋め込むためのポイント単位の量。
戻り値は、パディングを挿入したViewとなります。
Textでのpadding（パディング）
paddingを詳しく理解するために、４パターンのテキスト（borderを付けて）を見てみることにしました。
下記コードの（１）と（２）と（３）では、10ポイントと20ポイントと０ポイントのスペースの広さをなんとなく実感できます。文字と枠線のスペースがpaddingで獲得した広さです。
VStack {
Text("20ポイントのpadding") ・・・・（１）
.padding(20)
.border(.black)
Text("10ポイントのpadding") ・・・・（２）
.padding(10)
.border(.red)
Text("padding無し") ・・・・（３）
.border(.blue)
Text("paddingの記載順") ・・・・（４）
.border(.yellow)
.padding(10)
}
padding（パディング）の記載順には注意が必要
上記コードの（２）と（４）では、パディングは共に１０ですが、borderとpaddingの記載順序が逆になっています。
（２）は10ポイントのpaddingを獲得しViewを広げてから枠線で囲っています。
それに対して、
（４）はpaddingなし（0ポイント）の状態で枠線を囲ってからpaddingしています。（３）と（４）との表示スペースから結果的にpaddingによって余白10ポイントは獲得していますが、モディファイアの記載順には注意が必要です。
背景でのpadding（パディング）
次はView部品ではなくて、背景そのものとpaddingの関係を見ていきます。
画面の最奥（ZStack）にmint色を、その上にVStackを使ってred色を重ねました。
paddingが無い場合は、最奥のmint色が隠れてしまうのがイメージできるでしょうか？
ZStack {
Color.mint
VStack{
Color.red
}
.padding()
}
.padding(30) ・・・・・・・・（１）
ここで２パターンの処理を見てみます。
左下が（１）のpadding(30)がある画面、右下が（１）のpaddingを記載しなかった時の画面です。
ZStackでpaddingを利用すると使える画面が減ってしまいそうです。
また、奥にZStackがある場合は、上位のVStackやHStackでpaddingを使わないと、ZStackが見えなくなりそうです。
上位のVStackやHStackで利用するView部品が、TextとかButtonなら問題ありませんが、画面構成と部品の大きさをしっかり把握した上でpaddingは上手に利用しないといけませんね。
ポチップ
コメント