はじめに
paddingの使い方についてまとめた記事です
paddingとは
余白のことです。
全てのViewが使えるモディファイアとなっています。
基本的な使い方
.padding(引数１, 引数２) // 例) .padding(.left, 10) // 左 .padding(.right, 10) // 右 .padding(.top, 10) // 上 .padding(.bottom, 10) // 下 .padding(.bottom, 10) // 左右 .padding(.horizontal, 10) // 上下 .padding(.all, 10) // 上下左右
引数１には .left などの方向を指定します
引数２には 値をセットします
もちろん連続で使うことできますよ。
.padding(.left, 10) .padding(.top, 15)
使い方はいたってシンプルですね。
paddingの効果を見てみよう
Textにpaddingをつけてみて検証してみた。
・左: paddingあり、右:paddingなし
paddingは自分の領域を広げてるが正解なのかな。
親と子によって意味合いが変わるのでまだ解明できていないです。。
frameモディファイアとの組み合わせに注意
paddingに限ったことじゃないですが、モディファイアの順番によって結果が変わるので注意が必要です
・左: paddingが先、右: frameが先
そもそも paddingとframeを組み合わせるのが良くないかも
親と子でpaddingの意味合いが変わる？
親がpaddingした場合
親の内側に余白をとって子を配置する という意味になる
SwiftUIで親になるのはVStackやHStackなどです。
子がpaddingした場合
子の外側に余白を取る
↓
親に自分(子)のサイズが変わったことを伝える
↓
親がリサイズされる(必要なら)
※親サイズを固定していた場合は子のpaddingによってリサイズされなかった
おわりに
paddingを知れたおかげでSwiftUIの深い闇が見えた気がする