【SwiftUI】余白を設定するpadding()の使用方法

今回はSwiftUIの部品に余白を設定する方法を紹介します。

余白はデザインを大きく左右する要素なので、しっかり覚えて使いこなしたいですね！

padding()の設定方法
padding()を入れ子で設定する
padding()で片方向のみ余白を設定する
padding()で複数方向に余白を設定する
padding()で方向毎に別々の余白を設定する方法
まとめ
SwiftUI勉強中の方へ

padding()の設定方法

Textに余白をもたせます。

間にDivider区切り線を入れ、上と下のTextに異なる余白をもたせています。

それぞれのTextと区切り線の距離がpadding()で指定した数値の差となっています。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("padding(30)")
                .padding(30)
            Divider()
            Text("padding(50)")
                .padding(50)
        }
    }
}

padding()を入れ子で設定する

まず覚えておきたいのは、padding()は入れ子にできるということです。

そしてpadding()毎に背景色をつけることができます。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("padding(15)")
                .background(.purple)
                .padding(15)
                .background(.blue)
                .padding(15)
                .background(.cyan)
                .padding(15)
                .background(.green)
                .padding(15)
                .background(.yellow)
                .padding(15)
                .background(.orange)
                .padding(15)
                .background(.red)
        }
    }
}

padding()で片方向のみ余白を設定する

padding()の一つ目の引数に方向を指定することで片方向のみに余白を設定することができます。

上	.top
左	.leading
下	.bottom
右	.trailing

設定できる方向

struct ContentView: View {
    var body: some View {
        VStack {
            Text("padding(.top, 30)")
                .padding(.top, 30)
                .background(.red)
            Text("padding(.leading, 30)")
                .padding(.leading, 30)
                .background(.orange)
            Text("padding(.trailing, 30)")
                .padding(.trailing, 30)
                .background(.yellow)
            Text("padding(.bottom, 30)")
                .padding(.bottom, 30)
                .background(.green)
        }
    }
}

padding()で複数方向に余白を設定する

padding()の括弧内に配列で余白をもたせたい方向を指定することで複数方向に余白を設定できます。

一つ目のTextは上と左に、二つ目のTextは下と右に30の余白を設定しています。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("padding([.top, .leading], 30)")
                .padding([.top, .leading], 30)
                .background(.red)
            Text("padding([.bottom, .trailing], 30)")
                .padding([.bottom, .trailing], 30)
                .background(.yellow)
        }
    }
}

padding()で方向毎に別々の余白を設定する方法

EdgeInsetsを使用することで方向ごとに別々の余白を指定することができます。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("上:15,左:30,下:60,右:120")
                .padding(EdgeInsets(top: 15, leading: 30, bottom: 60, trailing: 120))
                .background(.red)
        }
    }
}