バッテラのハローワールド研究室

エンジニア、プログラミングに関する情報を掲載中!

【Swift】paddingモディファイアの基本的な使い方

SwiftUI

はじめに

paddingの使い方についてまとめた記事です

paddingとは

余白のことです。

全てのViewが使えるモディファイアとなっています。

基本的な使い方

.padding(引数1, 引数2)

// 例)
.padding(.left, 10) // 左
.padding(.right, 10) // 右
.padding(.top, 10) // 上
.padding(.bottom, 10) // 下
.padding(.bottom, 10) // 左右
.padding(.horizontal, 10) // 上下
.padding(.all, 10) // 上下左右

引数1には .left などの方向を指定します

引数2には 値をセットします

もちろん連続で使うことできますよ。

.padding(.left, 10)
.padding(.top, 15)

使い方はいたってシンプルですね。

paddingの効果を見てみよう

Textにpaddingをつけてみて検証してみた。

・左: paddingあり、右:paddingなし

paddingは自分の領域を広げてるが正解なのかな。
親と子によって意味合いが変わるのでまだ解明できていないです。。

frameモディファイアとの組み合わせに注意

paddingに限ったことじゃないですが、モディファイアの順番によって結果が変わるので注意が必要です

・左: paddingが先、右: frameが先

そもそも paddingとframeを組み合わせるのが良くないかも

親と子でpaddingの意味合いが変わる?

親がpaddingした場合

親の内側に余白をとって子を配置する という意味になる

SwiftUIで親になるのはVStackHStackなどです。

子がpaddingした場合

子の外側に余白を取る

親に自分(子)のサイズが変わったことを伝える

親がリサイズされる(必要なら)
※親サイズを固定していた場合は子のpaddingによってリサイズされなかった

おわりに

paddingを知れたおかげでSwiftUIの深い闇が見えた気がする