[SwiftUI]リスト(List)の要素(item)の余白(padding)を設定するには？

どうも、ちょげ(@chogetarou)です。

リストで表示する要素の余白を設定する方法を紹介します。

方法
使用例

方法

Listの要素の余白を設定するには、listRowInsets修飾子を使います。

まず、Listの要素にlistRowInsets修飾子を付与します。

そして、listRow修飾子の引数にEdgeInsets()を指定し、EdgeInsetsの引数で余白の設定をします。。

List {
   ItemView()
       .listRowInsets(
           EdgeInsets(top: /*上の余白*/,
                      leading: /*左の余白*/,
                      bottom: /*下の余白*/,
                      trailing: /*右の余白*/
                     )
       )
}

listRowInsets修飾子を使えば、リストの要素の余白を設定することができます。

使用例

以下は、使用例です。

struct ContentView: View {
    var colors : [Color] = [.red, .blue, .yellow, .green, .purple]
    var body: some View {
        List {
            ForEach (colors, id: \.self) { color in
                color
                    .listRowInsets(
                        EdgeInsets(top: 10,
                                   leading: 50,
                                   bottom: 10,
                                   trailing: 40
                                  )
                    )
            }
        }
    }
}