【SwiftUI】Viewに余白を付加する(padding)

Viewに余白を付加する.padding()について解説します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3

基本的な使い方

Viewに対するModifierとして使用します。
引数で指定した余白のサイズ分、View回りのframeサイズを広げます。
引数を省略した場合は、システムのデフォルト値が使われます。

使用例

こちらの例はテキストに対してラベルのサイズがぴったりなので、すこし窮屈なイメージです。

余白のないラベル

次のように.padding()を追加すると、テキストの回りに余白が付加され自然な感じのラベルになります。

余白のあるラベル

注意点として、このケースでは.padding()を追加する位置が重要です。
.background()の後に追加してしまうと、元のサイズで背景色を描画した後にフレームサイズが広がるので、見た目が変わりません。(もちろん本来の余白としてであればそれでも良いのですが・・)

これを逆手に取って、次の例では.padding()によって広げた部分を別の色で可視化しています。

2D0FDC01 88D8 4E16 97CF ED20582F1E2B

あわせて読みたい記事

【SwiftUI】Modifierの適用順
Viewに様々な変更を適用するModifierですが、適用する順番によって挙動が変わる事があります。これはModifierが既存のViewのプロパティを変更しているのでは無く、変更を適用した新しいViewを毎回作成している事に関係します。...
【SwiftUI】Textの使い方
Textは読み取り専用テキストを表示するViewです。UiKitのUILabelに相当する部品です。
SwiftUI
スポンサーリンク
スポンサーリンク
カピ通信

コメント