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

(2020/06/07 更新)

Viewに余白を付加するpaddingモデファイアについて解説します。

スポンサーリンク

環境

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

【Xcode】11.5
【Swift】5.2.4
【iOS】13.5
【macOS】Catalina バージョン 10.15.4
スポンサーリンク

基本的な使い方

Viewに対するModifierとして使用すると、Viewまわりのframeサイズを広げます。
広げる幅はシステムのデフォルトサイズが使用されます。

スポンサーリンク

使用例

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

余白のないラベル

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

余白のあるラベル

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

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

2D0FDC01 88D8 4E16 97CF ED20582F1E2B

スポンサーリンク

余白の幅を指定する

引数のタイプによって余白の幅を指定できます。

全ての辺の余白を同じ幅で指定

Viewまわりの余白サイズを数値で指定します。

使用例

E7D7081B 8767 42AB 8874 352C5E143119

特定の辺だけ余白を指定

最初の引数で、余白を付加する辺を指定します。
2つめの引数で、余白幅を指定します。未指定の場合は、システムのデフォルト値が適用されます。

辺の指定(Edge.Set)で使える値は次の通りです。

意味
.all すべての辺
.top 上辺のみ
.bottom 下辺のみ
.leading 左辺のみ
.trailing 右辺のみ
.horizontal 左右辺のみ
.vertical 上下辺のみ

使用例

B3280DD9 7A05 4A21 A876 FF1DBE2A6616

各辺の余白幅を個別に指定

各辺の余白幅を個別に指定可能です。一部省略はできません。

スポンサーリンク

あわせて読みたい記事

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