.paddingについてまとめた

paddingは、SwiftUIでビューの周囲にスペースを追加するための修飾子（modifier）です。paddingを使用することで、ビューの外側に余白を設定することができます。

padding修飾子は、ビューに適用する際に四方向の余白を指定することができます。具体的な使用方法は以下の通りです。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI!")
                .padding()
            Text("Hello, SwiftUI!")
                .padding()
            Text("Hello, SwiftUI!")
                .padding()
            Text("Hello, SwiftUI!")
                .padding()
        }
        .padding()
    }
}

この例では、Textビューにpadding修飾子を適用しています。デフォルトでは、四方向に16ポイントの余白が追加されます。

また、四方向に異なる余白を指定することもできます。例えば、上方向には16ポイント、左右方向には8ポイント、下方向には32ポイントの余白を追加する場合は次のようになります。

Text("Hello, SwiftUI!")
    .padding(.top, 16)
    .padding([.leading, .trailing], 8)
    .padding(.bottom, 32)

padding修飾子では、第一引数に指定した方向に対して第二引数で余白の値を指定します。方向は、.top、.leading（左方向）、.trailing（右方向）、.bottomのいずれかを使用します。また、[ ] 内に複数の方向を指定することも可能です。

さらに、padding修飾子では余白の値を具体的な数値ではなく.edgesIgnoringSafeArea(.all)のような値を指定することもできます。これにより、ビューがセーフエリアの制約を無視して余白を追加することができます。

Text("Hello, SwiftUI!")
    .padding(.all, 16)
    .edgesIgnoringSafeArea(.all)

以上の内容をまとめてサンプルアプリを作りました

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 16) {
            Text("Hello, SwiftUI!")
                .font(.title)
                .foregroundColor(.white)
                .padding() // デフォルトの余白（16ポイント）が四方向に適用される
                .background(Color.blue)

            Text("Hello, SwiftUI!")
                .font(.title)
                .padding(.horizontal, 50) // 水平方向に20ポイントの余白を追加
                .padding(.vertical, 30) // 垂直方向に10ポイントの余白を追加
                .background(Color.yellow)

            Text("Hello, SwiftUI!!")
                .font(.title)
                .foregroundColor(.white)
                .padding(EdgeInsets(top: 40, leading: 1, bottom: 10, trailing: 30)) // カスタムの四方向の余白を追加
                .background(Color.green)
        }
        .padding(.all, 50) // 全体に20ポイントの余白を追加
        .background(Color.gray)
    }
}

こちらのアプリのTextに対してbackgroundColorを設定することでpaddingがどのように作用しているのかを分かりやすく確認することができます。

今日はここまで。